官方文档已声明,即使在page.json和app.json中开启下拉刷新,scroll-view组件也是不支持的。但我们可以通过曲线救国的方法来实现
实现代码
// wxml <scroll-view style=‘height: 300px;‘ scroll-y="{{true}}" scroll-top="{{scrollTop}}" bindscroll="scrollFn" bindscrolltolower="loadMore" > <view class="list" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view> </scroll-view>
// js Page({ data: { list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], timer: null, // 保存定时器 scrollTop: 5 // 设定触发条件的距离 }, onPullDownRefresh() { // 监听该页面用户下拉刷新事件 // 可以在触发时发起请求,请求成功后调用wx.stopPullDownRefresh()来结束下拉刷新 console.log(‘下拉拉拉‘) }, 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:开始下拉刷新。因此即使下拉一定距离触发仍长按不释放,也能触发。
说的有点乱,可以按正常下拉释放和下拉并长按一段时间再释放,来查看控制台结果的差异
转 : https://blog.csdn.net/ishowman/article/details/79536163
原文地址:https://www.cnblogs.com/fps2tao/p/11165562.html
时间: 2024-11-08 21:37:35