scroll-view组件实现下拉刷新, 拉到底加载更多

Love The Way You Lie 2021-12-07 14:11 347阅读 0赞

官方文档已声明，即使在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