微信小程序如何實現下拉刷新和上拉分頁效果

這篇文章主要介紹“微信小程序如何實現下拉刷新和上拉分頁效果”，在日常操作中，相信很多人在微信小程序如何實現下拉刷新和上拉分頁效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序如何實現下拉刷新和上拉分頁效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

下拉刷新

下拉刷新這個玩意吧，很有用，但是在我博客關聯的小程序中，用處不大，也是，我那個小程序一共也沒有幾個頁……

我這里還是用在首頁，上拉分頁，下拉刷新重載分頁。我就是這么做的。

下拉刷新和上拉分頁還是有區別的。

下拉刷新需要在index.json中添加屬性：

"enablePullDownRefresh": true

Index.js

Page({
  data: {
    // 文章數組
    articleList:[],
    //每頁顯示的行數：
    pagesize: 20,
    //頁碼（從1開始）
    page:1,// 文章頁碼
    //用于標識是否還有更多的狀態
    state: 1,
    //用于數組的追加和暫存
    allProject: [],
  },
/**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    var self = this;
    self.getArticleList();
  },
    /**
   * 獲取文章列表
   */
  getArticleList()
  {
    var self = this;
    // 請求后臺接口獲取文章列表
    wx.request({
      // 請求連接
      url: 'https://guanchao.site/index/xxxx/xxxxx,
      // 請求所需要的的參數
      data: {
        'page':self.data.page
      },
      success(result){
        var resData = result.data;
        var resLength = result.data.length;
        //如果搜出來的結果<1 就說明后面已經沒數據可加載了，所以將state設為0
        if (resLength < 1)
        {
          self.setData({
            state: 0
          });
        }
        else
        {
          var state1 = 1;
          //如果有數據，但小于每次期望加載的數據量（pagesize）,將state設為0，表示后面已沒有數據可加載
          if (resLength < self.pagesize)
          {
            var state1 = 0;
          }
          //循環將結果集追加到數組后面
          for (var i = 0; i < resLength; i++) {
            self.data.allProject.push(resData[i]);
          }
          self.setData({
            articleList: self.data.allProject,
            state: state1
          });
        }
        wx.hideLoading();
  
      }
    });
  },
  /**
   * 下拉刷新
   */
  onPullDownRefresh() {
    // 下拉刷新
    var self = this;
    wx.showLoading({
      title: '加載中...',
});
// 頁碼重新設置回1
self.data.page = 1;
// 將顯示列表數據清空
    self.data.allProject = [];
    self.getArticleList();
    wx.stopPullDownRefresh();
  }, 
  
});

可以看到，我們增加了一個onPullDownRefresh函數并在里面調用了getArticleList去請求第一頁的數據，并且頁面顯示數據的數組清空， 頁碼設置成1，重新加載數據。

另外，下拉刷新的事件也可以通過調用APIwx.startPullDownRefresh觸發，效果與用戶手動下拉刷新一致。

上拉分頁

一般APP 或者 手機端一般給我們提供的都是，上拉分頁，但是vant小程序版的組件是為我們提供了類似于PC網頁那樣的頁碼分頁。

但是吧，我就不太想用web網站那樣做一串數字頁碼那樣了，這是反人類的設計。使用上拉進行分頁。

小程序為我們提供了上拉加載事件：onPullDownRefresh

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
  
  },

對，就是這個玩意。

這個直接就能觸發，不需要其他什么多余的設置，下邊我分享一下，我上拉分頁的代碼。

Index.js

Page({
  data: {
    // 文章數組
    articleList:[],
    //每頁顯示的行數：
    pagesize: 20,
    //頁碼（從1開始）
    page:1,// 文章頁碼
    //用于標識是否還有更多的狀態
    state: 1,
    //用于數組的追加和暫存
    allProject: [],
  },
/**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    var self = this;
    self.getArticleList();
  },
    /**
   * 獲取文章列表
   */
  getArticleList()
  {
    var self = this;
    // 請求后臺接口獲取文章列表
    wx.request({
      // 請求連接
      url: 'https://guanchao.site/index/xxxx/xxxxx,
      // 請求所需要的的參數
      data: {
        'page':self.data.page
      },
      success(result){
        var resData = result.data;
        var resLength = result.data.length;
        //如果搜出來的結果<1 就說明后面已經沒數據可加載了，所以將state設為0
        if (resLength < 1)
        {
          self.setData({
            state: 0
          });
        }
        else
        {
          var state1 = 1;
          //如果有數據，但小于每次期望加載的數據量（pagesize）,將state設為0，表示后面已沒有數據可加載
          if (resLength < self.pagesize)
          {
            var state1 = 0;
          }
          //循環將結果集追加到數組后面
          for (var i = 0; i < resLength; i++) {
            self.data.allProject.push(resData[i]);
          }
          self.setData({
            articleList: self.data.allProject,
            state: state1
          });
        }
        wx.hideLoading();
  
      }
    });
  },
  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    var self = this;
    var state = self.data.state;
    if (state > 0){
        // wx.showLoading({
        //     title: '加載中...',
        // });
        self.data.page = self.data.page + 1;
        self.getArticleList()
        // wx.hideLoading();
    }
  },   
  
});

到此，關于“微信小程序如何實現下拉刷新和上拉分頁效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！