«

better-scroll左右联动使用方法

时间:2023-8-12 01:04     作者:小诸葛     分类: Vue     正在检查是否收录...


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)
            }
        }
    })
})

better-scroll左右联动使用方法

推荐阅读:


扫描二维码,在手机上阅读