微信小程序中实现页面下拉刷新和上拉加载更多的代码示例

本篇文章给大家带来的内容是关于微信小程序中实现页面下拉刷新和上拉加载更多的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉到达最底部

小程序里,用户顶部下拉是禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;

index.json

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

如果看不到下拉动画,需要在 app.json 中设置

  window: {
    backgroundTextStyle: dark
  },

接下来就是写 js 代码

下拉刷新

/**
   * 下拉刷新恢复初始化
   */
  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)
      }
    })
  },

上拉加载更多

/**
   * 上拉刷新触底加载更多
   */
  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)
      }
    })
  },

相关推荐:

微信小程序中如何来设置全局变量(代码)

微信小程序中如何调用本地的接口

微信小程序中实现同步请求的方法

相关文章

开发微信小程序的用户授权登录功能
小程序开发页面如何实现跳转?
浅谈小程序开发中蓝牙连接错误分析及解决方法
什么是小程序?它有哪些功能?
如何配置小程序开发项目结构?(教程)
怎么把自己的店加入小程序