vant左右联动核心代码

左右联动

let leftScroll: any; //左边滚动
let rightScroll: any; // 右边滚动
// 点击事件  点击左边右边滚动到指定位置
let changeNumber = (index: any) => {
    rightScroll.scrollToElement('#key' + index, 1500)
}
// 实现左右联动

// 计算属性 计算右边盒子高度 并且对数组进行计算返回一个数组对象
let heightArr = computed(() => {
    let harr = ref<any>([])
    store.goods.forEach((obj: any, i: any) => {
        harr.value.push(document.getElementById(i)?.offsetHeight)
    })
    let newArr = ref<any>([])
    let totalHeight = ref(0)
    harr.value.forEach((arr: any, n: any) => {
        newArr.value.push({ min: totalHeight.value, max: totalHeight.value + arr, index: n })
        totalHeight.value += arr
    })
    return newArr.value
})
//初始化
onMounted(() => {
    leftScroll = new BScroll('.list_left', { click: true, probeType: 3 });
    rightScroll = new BScroll('.list_right', { click: true, probeType: 3 });
    //右边滚动事件
    rightScroll.on('scroll', (pos: any) => {
        let _y = Math.floor(Math.abs(pos.y))

        // 循环高度数组 进行判断使其在某一个区间联动左边滚动
        for (let obj of heightArr.value) {
            if (_y >= obj.min && _y <= obj.max) {
                active.value = obj.index
                leftScroll.scrollToElement('#left' + obj.index, 500)
            }
        }
    })
})