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

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

上滑加载更多

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

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

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

下拉重新加载

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

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

下拉刷新的本质是，将已有的数据全部清除，重新给data中的数组赋值，一般向api请求时都会返回随机的数据

<view class="wrap">
	<view wx:for="{{numList}}" wx:key="index">{{item}}</view>
</view>
1
2
3

.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;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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