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

　　介绍

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

<强>一:html部分

& lt; div 类=癳xample", ref=癲ivScroll"比; 　　& lt;才能div> 　　,,,& lt; p>内容1 & lt;/p> 　　,,,& lt; p>内容2 & lt;/p> 　　,,,& lt; ul> 　　,,,,,,& lt; li> list1 　　,,,,,,& lt; li> list2 　　,,,& lt; ul> 　　& lt;才能/div> 　　& lt;/div>【注】

1。最外层加裁判,让better-scroll通过裁判来获取整个div;

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

<强>二:css部分

.example 　　,宽度:100% 　　,位置:绝对的 　　,最高:174 px 　　,底部:48 px 　　,左:0 　　隐藏,溢出:

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

2。首先将获取到的加了裁判的div的高度固定,可以设置定位,也可以设置,高度,max-height……

3。加溢出:隐藏。

<强>三:js部分

首先引入better-scroll:

import  BScroll 得到& # 39;better-scroll& # 39;;

1:使用安装()函数

安装(),{ 　　时间=this.scroll 才能;new  BScroll(这一点。refs.divScroll美元,,{ 　　,,,点击:,真的, 　　,,}); 　　},

2。使用()创建函数

创建(),{ 　　这个。才能nextTick美元((),=祝辞,{ 　　,,this.scroll =, new  BScroll(这一点。refs.divScroll美元,,{ 　　,,,点击:,真的, 　　,,}); 　　,,}); 　　},

【注】1。使用创建函数要异步执行(此html尚时未渲染完成).

2。安装函数无需异步执行(安装函数在html渲染完成后触发)。

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

<强> 1。用npm安装好better-scroll

<代码> npm安装,节省better-scroll

2。在需要的页面引入

<代码>从& # 39;进口BScroll better-scroll& # 39;

3。在数据中定义better-scroll的参数

选项:,{ 　　,,,,pullDownRefresh:, { 　　,,,,,阈值:,,,//,当下拉到超过顶部,50 px 时,触发,pullingDown 事件 　　,,,,,站:,20,//,刷新数据的过程中,回弹停留在距离顶部还有,20 px 的位置 　　,,,,}, 　　,,,,pullUpLoad:, { 　　,,,,,阈值:,-20,//,在上拉到超过底部,20 px 时,触发,pullingUp 事件 　　,,,,},//,,,,,pullDownRefresh:,假的,,//关闭下拉//,,,,,pullUpLoad:,假的,,//,关闭上拉 　　,,,,点击:,真的, 　　,,,,probeType:, 3, 　　,,,,startY:, 0, 　　,,,,滚动条:真实 　　,,,}

4。在模板中写入

& lt; div 类=皐rapper", ref=皐rapper",:滚动条=皁ptions.scrollbar",: startY=皁ptions.startY"在

5。在方法中写入方法,我自定义的

load (), { 　　,,,if  (! this.scroll), { 　　,,,,this.scroll =, new  BScroll(这一点。refs.wrapper美元,this.options); 　　,,,,//,上拉 　　,,,,this.scroll.on (& # 39; pullingUp& # 39;,,(),=祝辞,{ 　　,,,,,//,刷新数据的过程中,回弹停留在距离顶部还有20 px的位置 　　,,,,,this.setData (); 　　,,,,}) 　　,,,},{else  　　,,,,this.scroll.refresh () 　　,,,} 　　,,}, 　　,setData (), { 　　,,,这个。nextTick美元((),=祝辞,{ 　　,,,,let  arr =,(1,, 2,, 3,, & # 39;詹姆斯# 39;]; 　　,,,,this.data =, this.data.concat (arr)//,添加数据 　　,,,,this.scroll.finishPullUp (); 　　,,,,this.pullingDownUp () 　　,,,}) 　　,,}, 　　pullingDownUp (), { 　　,,,this.scroll.refresh(),//重新计算元素高度 　　,,},

6。在创建中加载

,这个。nextTick美元((),=祝辞,{ 　　,,,this.load () 　　,,,this.setData () 　　,,})

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

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