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

百变鹏仔 6天前 #前端问答

文章标签示例

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

查看文档，在用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 <p>

文章推荐

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

揭秘：魏则西离去真正的原因（派代网）

拒绝做微商被屏蔽拉黑，方法我有！（派代网）

【派代&amp;生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）

寻洲：微商警戒线，你知道几个？

拒绝做微商被屏蔽拉黑，方法我有！（）

【派代&生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）