【微信小程序】列表滚动触底更新实现_微信小程序如何实现上拉触底

微信小程序开发系列

---

---

前言

在微信小程序开发中经常遇到分页列表需要滚动到底部之后进行请求数据更新，下面介绍如何进行触底更新分页展示。使用到页面上拉触底事件的处理函数onReachBottom。

---

一、上拉触底事件函数onReachBottom

监听用户上拉触底事件，可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。
代码：

page.js

 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
  },
1
2
3
4
5

app.json

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "练习",
    "navigationBarTextStyle": "black",
    "onReachBottomDistance": 100
  },
1
2
3
4
5
6
7

设置不同onReachBottomDistance的值，当滚动到不同位置时就会触发，单位是px。

二、实现

var http = require('../../utils/http.js');
var config = require('../../utils/config.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [],
    current: 1,
    pages: 0,
    sts: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    if (options.sts) {
      this.setData({
        sts: options.sts
      });
      this.loadOrderData(options.sts, 1);
    } else {
      this.loadOrderData(0, 1);
    }
  },

  /**
   * 加载订单数据
   */
  loadOrderData: function(sts, current) {
    var ths = this;
    wx.showLoading();//显示加载中
    //加载订单列表
    var params = {
      url: "page/myOrder",
      method: "GET",
      data: {
        current: current,
        size: 10,
        status: sts,
      },
      callBack: function(res) {
        var list = [];
        if (res.current == 1) {
          list = res.records;
        } else {
          list = ths.data.list;
          Array.prototype.push.apply(list, res.records);//设置请求的最新数据
        }
        ths.setData({
          list: list,
          pages: res.pages,
          current: res.current
        });
        wx.hideLoading();//隐藏加载中
      }
    };
    http.request(params);
  },

  /**
   * 状态点击事件
   */
  onStsTap: function(e) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    if (this.data.current < this.data.pages) {//判断是否超过总页数
      this.loadOrderData(this.data.sts, this.data.current + 1);//加载数据
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120