欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)下拉刷新和上拉分頁效果的方法詳解

 更新時(shí)間:2022年06月01日 11:00:27   作者:camellia  
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)畫是如何實(shí)現(xiàn)下拉刷新和上拉分頁效果的,文中示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

下拉刷新

下拉刷新這個(gè)玩意吧,很有用,但是在我博客關(guān)聯(lián)的小程序中,用處不大,也是,我那個(gè)小程序一共也沒有幾個(gè)頁……

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

下拉刷新和上拉分頁還是有區(qū)別的。

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

"enablePullDownRefresh": true

Index.js

Page({
  data: {
    // 文章數(shù)組
    articleList:[],
    //每頁顯示的行數(shù):
    pagesize: 20,
    //頁碼(從1開始)
    page:1,// 文章頁碼
    //用于標(biāo)識(shí)是否還有更多的狀態(tài)
    state: 1,
    //用于數(shù)組的追加和暫存
    allProject: [],
  },
/**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
    var self = this;
    self.getArticleList();
  },
    /**
   * 獲取文章列表
   */
  getArticleList()
  {
    var self = this;
    // 請求后臺(tái)接口獲取文章列表
    wx.request({
      // 請求連接
      url: 'https://guanchao.site/index/xxxx/xxxxx,
      // 請求所需要的的參數(shù)
      data: {
        'page':self.data.page
      },
      success(result){
        var resData = result.data;
        var resLength = result.data.length;
        //如果搜出來的結(jié)果<1 就說明后面已經(jīng)沒數(shù)據(jù)可加載了,所以將state設(shè)為0
        if (resLength < 1)
        {
          self.setData({
            state: 0
          });
        }
        else
        {
          var state1 = 1;
          //如果有數(shù)據(jù),但小于每次期望加載的數(shù)據(jù)量(pagesize),將state設(shè)為0,表示后面已沒有數(shù)據(jù)可加載
          if (resLength < self.pagesize)
          {
            var state1 = 0;
          }
          //循環(huán)將結(jié)果集追加到數(shù)組后面
          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: '加載中...',
});
// 頁碼重新設(shè)置回1
self.data.page = 1;
// 將顯示列表數(shù)據(jù)清空
    self.data.allProject = [];
    self.getArticleList();
    wx.stopPullDownRefresh();
  }, 
  
});

可以看到,我們增加了一個(gè)onPullDownRefresh函數(shù)并在里面調(diào)用了getArticleList去請求第一頁的數(shù)據(jù),并且頁面顯示數(shù)據(jù)的數(shù)組清空, 頁碼設(shè)置成1,重新加載數(shù)據(jù)。

另外,下拉刷新的事件也可以通過調(diào)用APIwx.startPullDownRefresh觸發(fā),效果與用戶手動(dòng)下拉刷新一致。

上拉分頁

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

但是吧,我就不太想用web網(wǎng)站那樣做一串?dāng)?shù)字頁碼那樣了,這是反人類的設(shè)計(jì)。使用上拉進(jìn)行分頁。

小程序?yàn)槲覀兲峁┝松侠虞d事件:onPullDownRefresh

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh: function () {
  
  },

對,就是這個(gè)玩意。

這個(gè)直接就能觸發(fā),不需要其他什么多余的設(shè)置,下邊我分享一下,我上拉分頁的代碼。

Index.js

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

以上大概就是上拉分頁的代碼,說是上拉分頁,其實(shí)就是滾動(dòng)條觸底觸發(fā)的方法。但是為了體驗(yàn)的更好,還是需要做一些限制的。

大概就是這么實(shí)現(xiàn)的。

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)下拉刷新和上拉分頁效果的方法詳解的文章就介紹到這了,更多相關(guān)小程序下拉刷新 上拉分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • js取消單選按鈕選中并判斷對象是否為空

    js取消單選按鈕選中并判斷對象是否為空

    取消單選按鈕選中并判斷對象是否為空,在項(xiàng)目中也是比較常見的,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下
    2013-11-11
  • 最新評論