原生微信小程序实现 “上拉刷新” 和 “下拉加载” 的原理

本是古典何须时尚 2022-12-03 12:54 179阅读 0赞

## 原生微信小程序实现 “上拉刷新” 和 “下拉加载” 的原理 ##

![在这里插入图片描述][20200903151124898.gif_pic_center]

## **上滑加载更多** ##

**在使用上滑加载更多时，有一个小坑需要注意下，如果是自定义的scroll-view，滑到底是没法触发onReachBottom函数的  
需要在scroll-view组件上定义lower-threshold="50"属性（距底部/右边多远（50）时，触发 scrolltolower 事件）  
然后bindscrolltolower = “自定义函数名”，把需要执行的逻辑放在这里面执行，假装他是onReachBottom函数**

**实现上滑加载更多的本质是  
1 . 使用生命周期函数中的onReachBottom函数  
2 .  
下拉加载的本质是，把原有数据（data中已经获取的数据，如data中的numList，在页面加载时向里面添加了40个数据）和新添加的数据（在onReachBottom函数中进行添加数据，用户上滑时，加载进新数据），重新合并到新的数组里再把这个数组和赋值给data中的数组**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]

Page({ 
      data: { 
        numList: []
      },
      // 初始化数据，
      startNumList: [],
      index: 40,
      // 页面加载时先给startNumList赋值，塞40个数进去，再给data中的numList赋值
      onLoad: function (options) { 
        for (let i = 0; i < this.index; i++) { 
          this.startNumList.push(i)
        }
        this.setData({ 
          numList: this.startNumList
        })
      },
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      /** * 下拉刷新的本质是，将已有的数据全部清除，重新给data中的数组赋值 */
      onPullDownRefresh: function () { 
        // 重置一系列初始化数据
        this.index = 40;
        this.setData({ 
          numList: this.startNumList
        })
        // 这里用一个定时器模拟请求等待时间
        setTimeout(() => { 
          wx.showToast({ 
            title: '数组已重置',
            duration: 700,
          });
          wx.stopPullDownRefresh({ 
            complete: (res) => {  },
          })
        }, 1000)
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
        wx.showLoading({ 
          title: "增加20个数中...",
          mask: true
        });
        // for每次刷新，向数组中新增20个数
        for (let i = this.index; i < this.index + 20; i++) { 
          const newArr = [];
          newArr.push(i);
          this.setData({ 
            // 解构赋值，旧的数组和新增加的20个数的数组，一起赋值给data中的数组
            numList: [...this.data.numList, ...newArr]
          })
        }
        // 再次使用setTimeout模拟请求等待时间
        setTimeout(() => { 
          this.index += 20;
          wx.hideLoading();
        }, 1000)
      }
    })

## 下拉重新加载 ##

**下拉加载的小坑需要注意下  
1 . 下拉重新加载是依赖onPullDownRefresh函数进行的  
2 . 要启动onPullDownRefresh函数，要先在json文件中进行配置  
“enablePullDownRefresh”: true,（设置开启下拉加载）  
“backgroundTextStyle”: “dark”,（设置加载有黑色点闪烁）**

**下拉加载函数onPullDownRefresh同样不适用自定义scroll-view  
需要在scroll-view组件上使用upper-threshold="50"属性  
再使用bindscrolltoupper=“自定义函数名”，所有逻辑在自定义函数名中操作，假装他是onPullDownRefresh函数**

**下拉刷新的本质是，将已有的数据全部清除，重新给data中的数组赋值，一般向api请求时都会返回随机的数据**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 1]

.wrap { 
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; view:nth-child(2n) { 
        padding: 20rpx;
        color: red;
      }
    
      view:nth-child(2n+1) { 
        padding: 20rpx;
        color: blue;
      }
    }

**代码gitee地址：https://gitee.com/chenminghuisir/wechat-applet-component**  
**代码保存在仓库，pullDowmUpEvent文件里**

[20200903151124898.gif_pic_center]: /images/20221123/121f3727052842e2a1aa2692ffa5bf29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/73ea0b1e40bf487ca41f1e573326bd91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/0e4498f00e6b47619d0cfe681993da35.png