scroll-view双向联动

scroll-view的双向联动，主要应用场景为分类菜单，点击左边分类右边自动滑动到对应的分类菜单下，滑动右边分类列表的同时，左边的分类菜单也会同时滑动

在得到分类数据的时候，首先得到整个分类列表的高度

this.$nextTick(() => {
    setTimeout(() => {
        this.setScrollHeight();
    }, 1500);
});

setScrollHeight() {
    let h = 0;
    const query = uni.createSelectorQuery();
    query.selectAll('.goods-item').boundingClientRect().exec((res) => {
        res[0].forEach((item) => {
            h += item.height;
            this.goodsHeight.push(h);
        })
    });

    this.menuHeight = [];
    let m = 0;
    query.select(".cu-item").boundingClientRect().exec((res) => {
        res[0].forEach((item) => {
            m += item.height;
            this.menuHeight.push(m);
        })
    });

}

右边联动

scroll-view中的属性:scroll-into-view="'main-'+mainCur"，和标题的:id="'main-'+index"进行相对应的关联；点击左边菜单赋值给mainCur即可

TabSelect(e) {
    this.tabCur = e.currentTarget.dataset.id;
    this.mainCur = e.currentTarget.dataset.id;
},

左边联动，重点

上面已经获取到菜单和分类页的高度，根据高度来对菜单加值，减值，实现左边联动滑动的效果
右边scroll-view中属性@scroll="VerticalMain"可监听scroll-view滚动

VerticalMain(e) {

    if (this.goodsHeight.length == 0) {
        return;
    }

    let scrollTop = e.detail.scrollTop + 10;
    let current = this.tabCur;
    
    if (scrollTop >= this.verticalNavTop) {
        if (current + 1 < this.goodsHeight.length && scrollTop >= this.goodsHeight[current]) {
            this.tabCur = current + 1;
        }
    } else {
        if (current - 1 >= 0 && scrollTop < this.goodsHeight[current - 1]) {
            this.tabCur = current - 1;
        }
    }
    this.verticalNavTop = scrollTop;
},

优点：如果得到的分类数据标题没有id值，可根据此方法来
缺点：代码量比用id来进行赋值多了一些，根据得到的接口数据来使用