More code examples for implementing page pull-down refresh and pull-up loading in WeChat mini program

The content of this article is about the code examples for implementing page pull-down refresh and pull-up loading in the WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

Check the document. When registering the page with the page() function, there are two object parameters like this. User judgment Pull down and at the top to reach the bottom

In the mini program, the user's top drop-down is disabled by default. We need to set it to enable. The setting in app.json is valid for all pages, and the setting on a separate page is valid for the current page;

index.json

{
  "enablePullDownRefresh": true,
  "onPullDownRefresh": true,
  "onReachBottom": true
}

If you can’t see the drop-down animation, you need to set it in app.json

  "window": {
    "backgroundTextStyle": "dark"
  },

The next step is to write the js code

Pull-down refresh

/**
   * 下拉刷新恢复初始化
   */
  onPullDownRefresh: function () {
    
    var self = this;

     // 刷新清空搜索框
    self.data.wxSearchData.value = '';
    self.setData({
      wxSearchData: self.data.wxSearchData
    })

    // 初始化列表
    app.globalData.allData = null;
    // app.globalData.findData = null;
    // 初始页数设置为1
    app.globalData.currentPage = 1;
    var _currentPage = app.globalData.currentPage;
    // 搜索关键字
    app.globalData.findData = '';
    var _find = app.globalData.findData;
    // 10位数时间戳
    var _timeStamp = Date.parse(new Date());
    _timeStamp = _timeStamp / 1000;
    // 秘钥
    var _tokenKey = _timeStamp + "xxx" + "127.0.0.1" + _find;
    _tokenKey = key.md5(_tokenKey);

    wx.request({
      url: 'https://xxx:9090/v1/Tools/UserModel/GetUserList/',
      data: {
        find: _find,
        tokenKey: _tokenKey,
        timeStamp: _timeStamp,
        currentPage: _currentPage,
      },
      method: "GET",
      header: {
        "Content-Type": "application/json",
      },
      success: function (res) {
        app.globalData.allData = res.data.datas;
        // console.log(res)
        self.setData({
          list: res.data.datas
        })
        // 显示顶部刷新图标
        wx.showNavigationBarLoading();
        // 隐藏导航栏加载框
        wx.hideNavigationBarLoading();
        // 停止下拉动作
        wx.stopPullDownRefresh();
      },
      fail: function () {
        console.log("error")
      }
    })
  },

Pull up to load more

/**
   * 上拉刷新触底加载更多
   */
  onReachBottom: function () {

    var self = this;
    
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中',
    })

    // 页数+1
    app.globalData.currentPage ++;
    var _currentPage = app.globalData.currentPage;
    // 搜索关键字
    var _find = app.globalData.findData;
    // 10位数时间戳
    var _timeStamp = Date.parse(new Date());
    _timeStamp = _timeStamp / 1000;
    // 秘钥
    var _tokenKey = _timeStamp + "xxx" + "127.0.0.1" + _find;
    _tokenKey = key.md5(_tokenKey);
    
    wx.request({
      url: 'https://api.xxx.com:9090/v1/Tools/UserModel/GetUserList/',
      data: {
        find: _find,
        tokenKey: _tokenKey,
        timeStamp: _timeStamp,
        currentPage: _currentPage,
      },
      method: "GET",
      header: {
        "Content-Type": "application/json",
      },
      success: function (res) {
        // 回调函数，将新数据压到队列里
        for (var i = 0; i < res.data.each_page; i++) {
          app.globalData.allData.push(res.data.datas[i]);
        }
        // 设置数据
        self.setData({
          list: app.globalData.allData
        })
        // 隐藏加载框
        wx.hideLoading();
      },
      fail: function () {
        console.log("error")
      }
    })
  },

Related recommendations:

How to set global variables (code) in WeChat applet

How to call the local interface in the WeChat applet

How to implement synchronous requests in the WeChat applet

The above is the detailed content of More code examples for implementing page pull-down refresh and pull-up loading in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!