左右联动筛选

 

这样的效果。

结构：左边是scroll-view(为了实现滚动右边，左边切换激活状态)， 右边是view.

点击左边，右边要滚动到相应的位置，这个效果怎么实现呢？A: 直接 pageScrollTo:

mbLeftItemTap(idx) {
                if (this.leftActiveIdx != idx) {
                    this.leftActiveIdx = idx
                    this.scrollviewId = 'scrollin' + idx
                    console.log('点击左边选项卡', this.majorTopGap)
                    // 滚动页面
                    // 吸顶距离 + 之前的高度和
                    var that = this
                    let offset = this.navH > 68 ? 0 : 28 // TODO:狗皮膏药,魔法数字
                    uni.pageScrollTo({
                        scrollTop: idx == 0 ? this.majorTopGap + offset : this.itemTopArr[idx] + this.majorTopGap,
                        complete() {
                            setTimeout(function() {
                                that.tapLeft = false
                            }, 100); // 点最后一个,选中了倒数第二个Fix
                        }
                    })
                    this.tapLeft = true

                }
            },

有个魔法数字，是为了兼容不同机型（刘海屏，非刘海屏，安卓）点击左边后右边由吸顶变成不吸顶了，为了兼容这种效果不一致的问题，没有完全解决

itemTopArr 这个高度是怎么计算的呢？

getSectionPosArr() {
                let query = uni.createSelectorQuery().in(this)
                let sectionMarginBottom = 0 * util.pixelRatio
                query.selectAll('.mbrSection').boundingClientRect(data => {
this.sectionPosArr = data

                    let itemTopArr = [0]
                    for (var i = 1; i < data.length; i++) {
                        let newH = itemTopArr[i - 1] + data[i - 1].height + sectionMarginBottom
                        itemTopArr.push(newH)
                    }

                    this.itemTopArr = itemTopArr

                    let locationArr = [0]
                    for (var i = 1; i < this.itemTopArr.length; i++) {
                        let top = this.itemTopArr[i] + this.majorTopGap - this.navH
                        console.log('ding check', top)
                        locationArr.push(top)
                    }
                    this.locationArr = locationArr
                }).exec();

            },

 

setTimeout里面设置的变量tapLeft， 因为在 onPageScroll 函数里面有设置左边选中态的逻辑，如果不用这个变量，点击左边，左边激活态会来回闪烁

onPageScroll 具体如下：

onPageScroll(e) {

            this.lastTop = e.scrollTop

            if (this.kuIdx != 1) {
                return
            }

            if (!this.tapLeft) {
                // 滚动页面,定位
                for (var i = 1; i < this.locationArr.length; i++) {
                    if (this.lastTop < this.locationArr[i]) {

                        this.leftActiveIdx = i - 1 > this.majorSourceArr[this.majorSectionIdx].parent.length - 1 ? 0 : i -
                            1
                        console.log('找左下标>', this.leftActiveIdx)
                        setTimeout(() => {
                            this.scrollviewId = 'scrollin' + this.leftActiveIdx
                        }, 100);
                        break
                    }
                }
            }

            // 设置left高度
            let offset = this.majorTopGap - this.navH - e.scrollTop
            offset = offset < 0 ? 0 : offset
            // console.log('检查top', this.lastTop)
            let leftH = this.windowH - this.majorSetionH - this.navH - offset - 32 * util.pixelRatio

            this.leftOptionH = leftH
        },

为啥要“设置left高度”呢？  因为这个页面默认是不吸顶的,  滚动后有个吸顶效果，所以默认状态和吸顶状态，左边的scroll-view的高度是不同的，如果scroll-view高度写死，比如给个吸顶状态的高度，那么默认状态，没吸顶，滚动左边scroll-view, 底部的选项是怎么也滚不上来的。所以这里的解决方案是根据页面偏移量，动态设置左边scroll-view的高度。

 git提交信息Mark：切换国家，更换筛选