怎么在vue中使用better-scroll实现一个下拉刷新,上拉加载功能 - 行业资讯

　　介绍

怎么在vue中使用better-scroll实现一个下拉刷新,上拉加载功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

1,先开始写一个简单演示,最基本的代码架构

模板

& lt; div ref=皐rapper",类=皐rapper"比; 　　,& lt; ul 类=癱ontent"比; 　　,& lt; li>……& lt;/li> 　　,& lt; li>……& lt;/li> 　　,& lt;/ul> 　　& lt;/div> css

/*对外层div进行了高度上的限制*/.wrapper { 　　时间显示:大敌;固定; 　　,左:0; 　　,上图:0; 　　,底部:0; 　　,宽度:100%; 　　,身高:300 px; 　　,溢出:隐藏; 　　} 　　.content { 　　,宽度:100%; 　　,身高:800 px; 　　,背景:蓝色; 　　}

脚本

import BScroll 得到& # 39;better-scroll& # 39; 　　时间=this.scroll new BScroll (new BScroll(这一点。refs.wrapper美元))

2,进行改造升级,加上上拉刷新,下拉加载的代码。

, mounted (), {=,,this.scroll new BScroll(这一点。refs.wrapper美元,,{ 　　,//上拉加载　　,pullUpLoad: { 　　,//当上拉距离超过30 px时触发,pullingUp 事件　　阈值:,-30 　　}, 　　,//下拉刷新　　,pullDownRefresh: { 　　,//下拉距离超过30 px触发pullingDown事件　　阈值:大敌;30岁　　,//回弹停留在距离顶部20 px的位置　　,站:20 　　,} 　　,}) 　　,this.scroll.on (& # 39; pullingUp& # 39;,,(),=祝辞,{ 　　,console.log(& # 39;处理上拉加载操作& # 39;) 　　,setTimeout((),=祝辞,{ 　　,//事情做完,需要调用此方法告诉,better-scroll 数据已加载,否则上拉事件只会执行一次　　,this.scroll.finishPullUp () 　　,},2000) 　　,}) 　　,this.scroll.on (& # 39; pullingDown& # 39;,,(),=祝辞,{ 　　,console.log(& # 39;处理下拉刷新操作& # 39;) 　　,setTimeout((),=祝辞,{ 　　,console.log (& # 39; asfsaf& # 39;) 　　,//事情做完,需要调用此方法告诉,better-scroll 数据已加载,否则下拉事件只会执行一次　　,this.scroll.finishPullDown () 　　,},2000) 　　,}) 　　,}

关于怎么在vue中使用better-scroll实现一个下拉刷新,上拉加载功能问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。