参考文档：https://www.cnblogs.com/fps2tao/p/11165562.html
在page.json和app.json中开启下拉刷新，scroll-view组件是不支持的
<scroll-view style='height: 300px;'
:scroll-y="true"
:scroll-top="scrollTop"
@scroll="scrollFn"
@scrolltolower="loadMore"
>
<div class="list" v-for="list" :key="index">{{item}}</div>
</scroll-view>
data: {
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
timer: null, // 保存定时器
scrollTop: 5 // 设定触发条件的距离
},
// 小程序api自带
onPullDownRefresh() {
// 监听该页面用户下拉刷新事件
// 可以在触发时发起请求，请求成功后调用wx.stopPullDownRefresh()来结束下拉刷新
console.log('下拉拉拉')
},
methods: {
refresh() {
// 函数式触发开始下拉刷新。如可以绑定按钮点击事件来触发下拉刷新
wx.startPullDownRefresh({
success(errMsg) {
console.log("开始下拉刷新", errMsg);
},
complete() {
console.log("下拉刷新完毕");
}
});
},
scrollFn(e) {
// 防抖，优化性能
// 当滚动时，滚动条位置距离页面顶部小于设定值时，触发下拉刷新
// 通过将设定值尽可能小，并且初始化scroll-view组件竖向滚动条位置为设定值。来实现下拉刷新功能，但没有官方的体验好
clearTimeout(this.timer);
if (e.detail.scrollTop < this.data.scrollTop) {
this.timer = setTimeout(() => {
this.refresh();
}, 350);
}
},
// 触底加载更多
loadMore() {
let len = this.data.list.length,
lastItem = this.data.list[len - 1];
for(let i = 0; i< len; i++) {
this.data.list.push(lastItem + i + 1)
this.setData({
'list': this.data.list
})
}
}
}
注：onPullDownRefresh 和 wx.startPullDownRefresh 的区别
onPullDownRefresh : 下拉刷新。官方认为下拉一定距离并释放，为一次完整的下拉刷新，页面的onPullDownRefresh 才能监听到。因此，如果触发开始下拉，但仍长按不释放，不会被识别为一次完整的下拉刷新，onPullDownRefresh 无法监听到
wx.startPullDownRefresh：开始下拉刷新。因此即使下拉一定距离触发仍长按不释放，也能触发。
