怎么在vue中使用better-scroll实现一个列表左右联动效果-创新互联
本篇文章给大家分享的是有关怎么在vue中使用better-scroll实现一个列表左右联动效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
公司主营业务：
成都做网站、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。
创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。
创新互联公司推出
解放免费做网站回馈大家。
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
一.实现思路
(1)实现上是左右分别一个better-scroll列表
(2)利用计算右侧列表每一个大区块的高度来计算左侧的位置
二.实现
1.实现左右两个better-scroll
(1)dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域)
左边滚动列表dom
0" class="icon"
:class="classMap[item.type]">{{item.name}}
右边滚动列表dom
{{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;icomputed: {
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
0" class="icon"
:class="classMap[item.type]">{{item.name}}
//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实现一个列表左右联动效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享题目：怎么在vue中使用better-scroll实现一个列表左右联动效果-创新互联
文章源于：http://cdxtjz.cn/article/diigho.html
