better-scroll方法怎么在vue2中使用

这篇文章将为大家详细讲解有关better-scroll方法怎么在vue2中使用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

一：html部分

<divclass="example"ref="divScroll">
<div>
<p>内容1</p>
<p>内容2</p>
<ul>
<li>list1</li>
<li>list2</li>
<ul>
</div>
</div>

【注】

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

npm install--save better-scroll

2.在需要的页面引入

import BScroll from '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中写入

<divclass="wrapper"ref="wrapper":scrollbar="options.scrollbar":startY="options.startY">

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()
})

关于better-scroll方法怎么在vue2中使用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。