3. 左右联动
1. 初始化变量和属性
data(){
return {
scrollY: 0, // 右侧列表滑动的Y轴坐标(实时更新)
rightLiTops: [], // 所有分类的头部位置
}
},
2. 监听滑动事件
1. 监听右侧滑动
rightScroll.on('scroll', ({x, y})=>{
this.scrollY = Math.abs(y)
})
rightScroll.on('scrollEnd', ({x, y})=>{
this.scrollY = Math.abs(y)
})
2. 取出每个li的高度放入数组
_initRightLiTops(){
// 2.1 临时数据
const tempArr = []
// 2.2 第一个高度是0
let top = 0
tempArr.push(top)
// 2.3 遍历所有的li标签, 计算出叠加高度
let allLis = this.$refs.shopsParent.getElementsByClassName('shops-li')
console.log(allLis);
// 2.4 遍历所有li标签(伪数组转成真数组才能用forEach遍历)
Array.prototype.slice.call(allLis).forEach(li => {
// 2.5 获取每一个li标签的高度
top += li.clientHeight
tempArr.push(top)
})
// 2.6 更新
this.rightLiTops = tempArr
// console.log(this.rightLiTops);
}
}
3. 确定当前滚动位置对应的索引
currentIndex(){
// 1. 获取需要的变量
const {scrollY, rightLiTops} = this
// 2. 根据滚动的区间决定currentIndex的值
const cIndex = rightLiTops.findIndex((rTops, index) =>{
// scrollY >= 当前li的头部高度 && scrollY < 下一个li的头部高度
return scrollY >= rTops && scrollY < rightLiTops[index + 1]
})
// 3. 返回计算出来的动态索引
// console.log(cIndex);
return cIndex
}
