vue2中引用及使用 better-scroll的方法详解
使用时有三个要点:
一: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的方法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!