微信小程序中如何實(shí)現(xiàn)頁面下拉刷新和上拉加載更多

小編給大家分享一下微信小程序中如何實(shí)現(xiàn)頁面下拉刷新和上拉加載更多，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

在用page()函數(shù)注冊(cè)頁面的時(shí)候有這樣的兩個(gè)對(duì)象參數(shù)用戶判斷用戶在最頂部下拉和到達(dá)最底部

在小程序里，用戶頂部下拉是默認(rèn)禁止的，我們需要把他設(shè)置為啟用，在app.json中的設(shè)置對(duì)所有頁面有效，在單獨(dú)頁面設(shè)置則對(duì)當(dāng)前頁面有效；

index.json

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

如果看不到下拉動(dòng)畫，需要在 app.json 中設(shè)置

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

接下來就是寫 js 代碼了

下拉刷新

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

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

    // 初始化列表
    app.globalData.allData = null;
    // app.globalData.findData = null;
    // 初始頁數(shù)設(shè)置為1
    app.globalData.currentPage = 1;
    var _currentPage = app.globalData.currentPage;
    // 搜索關(guān)鍵字
    app.globalData.findData = '';
    var _find = app.globalData.findData;
    // 10位數(shù)時(shí)間戳
    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
        })
        // 顯示頂部刷新圖標(biāo)
        wx.showNavigationBarLoading();
        // 隱藏導(dǎo)航欄加載框
        wx.hideNavigationBarLoading();
        // 停止下拉動(dòng)作
        wx.stopPullDownRefresh();
      },
      fail: function () {
        console.log("error")
      }
    })
  },

上拉加載更多

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

    var self = this;
    
    // 顯示加載圖標(biāo)
    wx.showLoading({
      title: '玩命加載中',
    })

    // 頁數(shù)+1
    app.globalData.currentPage ++;
    var _currentPage = app.globalData.currentPage;
    // 搜索關(guān)鍵字
    var _find = app.globalData.findData;
    // 10位數(shù)時(shí)間戳
    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) {
        // 回調(diào)函數(shù)，將新數(shù)據(jù)壓到隊(duì)列里
        for (var i = 0; i < res.data.each_page; i++) {
          app.globalData.allData.push(res.data.datas[i]);
        }
        // 設(shè)置數(shù)據(jù)
        self.setData({
          list: app.globalData.allData
        })
        // 隱藏加載框
        wx.hideLoading();
      },
      fail: function () {
        console.log("error")
      }
    })
  },

看完了這篇文章，相信你對(duì)“微信小程序中如何實(shí)現(xiàn)頁面下拉刷新和上拉加載更多”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！