{{food.name}}
{{food.description}}
时间:2022-06-25 15:23:36 编辑:袖梨 来源:一聚教程网
一.实现思路
二.实现
1.实现左右两个better-scroll
(1)dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域)
左边滚动列表dom右边滚动列表dom
{{item.name}}
{{food.name}}
{{food.description}}
月售{{food.sellCount}}份 好评率{{food.rating}}%¥{{food.price}} ¥{{food.oldPrice}}
在数据请求完成后的$nextTick中初始化better-scroll,就能实现两个列表分别能滚动,至于联动,要后面自己做
_initScroll() { this.menuScroll = new BScroll(this.$els.menuWrapper,{ click:true //允许better-scroll列表上的点击事件 }); this.foodsScroll = new BScroll(this.$els.foodWrapper,{ probeType : 3 //让better-scroll监听scroll事件 }); this.foodsScroll.on('scroll',(pos) => { this.scrollY =Math.abs(Math.round(pos.y)); }) },
2.实现联动效果
(1)具体的联动实现思路
//初始化better-scroll _initScroll() { this.menuScroll = new BScroll(this.$els.menuWrapper,{ click:true }); this.foodsScroll = new BScroll(this.$els.foodWrapper,{ probeType : 3 }); this.foodsScroll.on('scroll',(pos) => { this.scrollY =Math.abs(Math.round(pos.y)); }) },
_calculateHeight() { let foodList = this.$els.foodWrapper.getElementsByClassName("food-list-hook"); let ; this.listHeight.push(height); for(let i=0;i
computed: { currentIndex() { for(let i=0;i< this.listHeight.length;i++) { let height1 = this.listHeight[i]; let height2 = this.listHeight[i+1]; if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){ return i; } } return 0; } },
//被点击事件 //dom//js selectMenu(index,event) { if(!event._constructed) { return ; } let foodList = this.$els.foodWrapper.getElementsByClassName("food-list-hook"); let el = foodList[index]; this.foodsScroll.scrollToElement(el,300); },