vue商品列表滚动效果_vue利用better-scroll插件实现分类页左右联动效果并实现点击左侧，滚动右侧...

A.计算分类的区间高度

methods:{

calulateHeight(){

1.第一步要先拿到每一个li分类--给li取一个class别名 food-list-hook

2.通过calulateHeight方法获取到li元素

let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")

console.log(foodlist)  //控制台输出

3.把所有li元素的可视高度进行一个累加，放进一个数组里，ps：没有数组，需要在data里定义一个空数组listHeight:[]

4.定义一个height，最顶部的位置，为0

let height = 0

5.把当前的位置高度push进刚刚定义的数组里去

this.listHeight.push(height)

6.然后需要遍历一下刚刚拿到的li元素，即：foodlist

for(let i=0;i

//拿到每一个li元素

let item= foodlist[i]

//把每一个li元素的可视高度进行一个累加 即:clientHeight

height+= item.clientHeight

//这个时候把每一个li的可视高度都放进listHeight数组里

this.listHeight.push(height)

}

console.log(this.listHeight) //这时候如果姿势对的话,会打印出所有li的可视高度

},

//该方法