铁雪资源网 Design By www.gsvan.com
一.实现思路
- (1)实现上是左右分别一个better-scroll列表
- (2)利用计算右侧列表每一个大区块的高度来计算左侧的位置
二.实现
1.实现左右两个better-scroll
(1)dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域)
左边滚动列表dom <div class="menu-wrapper" v-el:menu-wrapper> <ul> <li v-for="item in goods" class="menu-item" :class="{'current':currentIndex === $index}" @click="selectMenu($index,$event)"> <span class="text border-1px"> <span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>{{item.name}} </span> </li> </ul> </div> 右边滚动列表dom <div class="food-wrapper" v-el:food-wrapper> <ul> <li v-for="item in goods" class="food-list food-list-hook"> <h1 class="title">{{item.name}}</h1> <ul> <li v-for="food in item.foods" class="food-item border-1px"> <div class="icon"> <img width="57" height="57" :src="/UploadFiles/2021-04-02/food.icon">在数据请求完成后的$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)具体的联动实现思路
- 在渲染完成后($nextTick内),初始化better-scroll,并在初始化函数内添加右侧列表的scroll监听事件,并记录scrollY值到,存入vue的data中
- 在渲染完成后($nextTick内),计算右侧列表的每一个大区块的高度,并累加,存入数组listHeight
- 因为scrollY值在滚动中总是不断变化的,所以在computed中计算出currentIndex,当前滚动区域是哪一个大区块,也就是listHeight数组的下标
- 在dom中根据currentIndex应用左侧列表被点中的样式
- 在左侧列表某一项被点中的时候,右侧列表滑动到某一个大块区域,
//初始化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 height = 0; this.listHeight.push(height); for(let i=0;i<foodList.length;i++) { let item = foodList[i]; height += item.clientHeight; this.listHeight.push(height); } }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; } },<div class="menu-wrapper" v-el:menu-wrapper> <ul> <!-- :class="{'current':currentIndex === $index}" 就是根据currentIndex应用左侧列表被点中的样式 --> <li v-for="item in goods" class="menu-item" :class="{'current':currentIndex === $index}" @click="selectMenu($index,$event)"> <span class="text border-1px"> <span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>{{item.name}} </span> </li> </ul> </div>//被点击事件 //dom <div class="menu-wrapper" v-el:menu-wrapper> <ul> <!-- @click="selectMenu($index,$event)" 就是点击事件 --> <li v-for="item in goods" class="menu-item" :class="{'current':currentIndex === $index}" @click="selectMenu($index,$event)"> <span class="text border-1px"> <span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>{{item.name}} </span> </li> </ul> </div> //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); },以上所述是小编给大家介绍的vue和better-scroll实现列表左右联动效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无vue和better-scroll实现列表左右联动效果详解的评论...