本篇文章给大家分享的是有关怎么在vue中使用better-scroll实现一个列表左右联动效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联建站是专业的高昌网站建设公司,高昌接单;提供网站设计制作、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行高昌网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
一.实现思路
(1)实现上是左右分别一个better-scroll列表
(2)利用计算右侧列表每一个大区块的高度来计算左侧的位置
二.实现
1.实现左右两个better-scroll
(1)dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域)
左边滚动列表dom右边滚动列表dom
- 0" class="icon" :class="classMap[item.type]">{{item.name}}
{{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)具体的联动实现思路
在渲染完成后($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 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; } },
- 0" class="icon" :class="classMap[item.type]">{{item.name}}
//被点击事件 //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); },
- 0" class="icon" :class="classMap[item.type]">{{item.name}}
以上就是怎么在vue中使用better-scroll实现一个列表左右联动效果,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
网页题目:怎么在vue中使用better-scroll实现一个列表左右联动效果
新闻来源:http://njwzjz.com/article/jhossg.html