微客导航 » 文章资讯 » vue2中引用及使用 better-scroll的方法详解

vue2中引用及使用 better-scroll的方法详解

2023-09-05 16:56:04 294

使用时有三个要点：

一：html部分



内容1
内容2

list1
list2

【注】

1.最外层加ref，让better-scroll通过ref来获取整个div；

2.紧跟一个div，不用加任何样式或class，最终可以滑动的部分就是这个div，这个div必须是加了ref的div的直接子元素。在这个div里面就可以放置希望滑动的内容了。

二：css部分

.example
width:100%
position:absolute
top:174px
bottom:48px
left:0
overflow:hidden

【注】1.这里只是举例，并不是一定要这样写。

2.首先将获取到的加了ref的div的高度固定，可以设置定位，也可以设置 height，max-height...

3.加overflow:hidden。

三：js部分

首先引入better-scroll：

importBScrollfrom'better-scroll';

1:使用mounted()函数

mounted(){
this.scroll=newBScroll(this.$refs.divScroll,{
click:true,
});
},

2.使用created()函数

created(){
this.$nextTick(()=>{
this.scroll=newBScroll(this.$refs.divScroll,{
click:true,
});
});
},

【注】1.使用created函数要异步执行（此时html尚未渲染完成）。

2.mounted函数无需异步执行（mounted函数在html渲染完成后触发）。

下面看下Vue中引入better-scroll的方法

1.用npm安装好better-scroll

npminstall--savebetter-scroll

2.在需要的页面引入

importBScrollfrom'better-scroll'

3.在data中定义better-scroll的参数

options:{
pullDownRefresh:{
threshold:50,//当下拉到超过顶部50px时，触发pullingDown事件
stop:20//刷新数据的过程中，回弹停留在距离顶部还有20px的位置
},
pullUpLoad:{
threshold:-20//在上拉到超过底部20px时，触发pullingUp事件
},
//pullDownRefresh:false,//关闭下拉
//pullUpLoad:false,//关闭上拉
click:true,
probeType:3,
startY:0,
scrollbar:true
}

4.在template中写入

5.在methods中写入方法，我自定义的

load(){
if(!this.scroll){
this.scroll=newBScroll(this.$refs.wrapper,this.options);
//上拉
this.scroll.on('pullingUp',()=>{
//刷新数据的过程中，回弹停留在距离顶部还有20px的位置
this.setData();
})
}else{
this.scroll.refresh()
}
},
setData(){
this.$nextTick(()=>{
letarr=[1,2,3,'james'];
this.data=this.data.concat(arr)//添加数据
this.scroll.finishPullUp();
this.pullingDownUp()
})
}，
pullingDownUp(){
this.scroll.refresh()//重新计算元素高度
},

6.在created中加载

this.$nextTick(()=>{
this.load()
this.setData()
})

总结

以上所述是小编给大家介绍的vue2中引用及使用better-scroll的方法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

vue2中引用及使用 better-scroll的方法详解

热门推荐

随机推荐