好评率{{food.rating}}%
vue.js2.0 实现better-scroll的滚动效果实例详解
发布时间：2020-12-17 02:14:29 所属栏目：百科 来源：网络整理
导读：什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在 。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 与1.0版本不同的是,我们使用的是ref 很简单这
什么是 better-scrollbetter-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在 。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 与1.0版本不同的是,我们使用的是ref {
response=response.body;
if (response.errno===ERR_OK) {
this.goods=response.data;
}
//dom结构加载结束(nextTick这个接口是计算dom相关的,要确保原生dom已经渲染了)
this.$nextTick(()=>{
this._initScroll();
});
});
},methods:{
_initScroll(){
// 使用better-scroll实现的关键代码
this.menuScroll=new BScroll(this.$refs.menuWrapper,{click:true});
this.foodScroll=new BScroll(this.$refs.foodWrapper,{click:true});
}
}
};
很简单这样页面就可以滚动了,如下图
但是,这样左右两个页面并没有联动起来,需要我们再定义一个方法来计算滚动的高度,以及在计算属性中计算左侧当前索引在哪里 从而定义左侧边栏的位置 = height1 && this.scrollY < height2)){
return i;
}
}
return 0;
}
},methods:{
_initScroll(){
// 使用better-scroll实现的关键代码
this.menuScroll=new BScroll(this.$refs.menuWrapper,{
click: true,//探针作用，实时监测滚动位置
probeType: 3
});
this.foodScroll.on('scroll',(pos)=>{
this.scrollY=Math.abs(Math.round(pos.y))
});
},_calculateHeight(){
let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
let height=0;
this.listHeight.push(height);
for (var i = 0; i < foodList.length; i++) {
let item=foodList[i];
height+=item.clientHeight;
this.listHeight.push(height);
}
}
}
//dom结构加载结束(nextTick这个接口是计算dom相关的,要确保原生dom已经渲染了)
this.$nextTick(()=>{
this._initScroll();
this._calculateHeight();
});
在dom渲染后,也是需要计算高度的. 滑动右边,实现左边联动已经实现了,接下来就是,点击左边的菜单,右边的食物相应滚动到具体的位置 给左边菜单绑定一个事件 至此,整个联动实现的,完整代码如下
总结以上所述是小编给大家介绍的vue.js2.0 实现better-scroll的滚动效果实例详解。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |