怎么在vue中使用better-scroll实现一个下拉刷新、上拉加载功能

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

1、先开始写一个简单demo，最基本的代码架构

template

<div ref="wrapper" class="wrapper">
 <ul class="content">
 <li>...</li>
 <li>...</li>
 </ul>
</div>

css

/*对外层div进行了高度上的限制*/
.wrapper {
 display: fixed;
 left: 0;
 top: 0;
 bottom: 0;
 width: 100%;
 height:300px;
 overflow:hidden;
}
.content {
 width:100%;
 height:800px;
 background:blue;
}

script

import BScroll from 'better-scroll'
this.scroll = new BScroll(new BScroll(this.$refs.wrapper))

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

 mounted () {
 this.scroll = new BScroll(this.$refs.wrapper, {
 // 上拉加载
 pullUpLoad: {
 // 当上拉距离超过30px时触发 pullingUp 事件
 threshold: -30
 },
 // 下拉刷新
 pullDownRefresh: {
 // 下拉距离超过30px触发pullingDown事件
 threshold: 30,
 // 回弹停留在距离顶部20px的位置
 stop: 20
 }
 })
 this.scroll.on('pullingUp', () => {
 console.log('处理上拉加载操作')
 setTimeout(() => {
 // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
 this.scroll.finishPullUp()
 }, 2000)
 })
 this.scroll.on('pullingDown', () => {
 console.log('处理下拉刷新操作')
 setTimeout(() => {
 console.log('asfsaf')
 // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
 this.scroll.finishPullDown()
 }, 2000)
 })
 }

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