微信小程式中實作頁面下拉刷新和上拉加載更多的程式碼範例

不言
發布: 2018-08-11 17:41:11
原創
8603 人瀏覽過

本篇文章帶給大家的內容是關於微信小程式中實現頁面下拉刷新和上拉加載更多的程式碼範例,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

查看文檔,在用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")
      }
    })
  },
登入後複製

 相關推薦:

微信小程式中如何設定全域變數(程式碼)

#微信小程式中如何呼叫本地的介面

微信小程式中實作同步請求的方法

以上是微信小程式中實作頁面下拉刷新和上拉加載更多的程式碼範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!