小程序隨筆9:簡(jiǎn)單實(shí)現(xiàn)列表下拉刷新和上拉加載

小程序?qū)崿F(xiàn)列表下拉刷新上拉加載更多。本文主本介紹兩個(gè)方法的使用,分別是:下拉刷新onPullDownRefresh,上拉加載更多onReachBottom,列表實(shí)現(xiàn)前面文章中已實(shí)現(xiàn),請(qǐng)參考地址:http://m.itdecent.cn/p/44b07a86c8ff。

實(shí)現(xiàn)方法:
1、在小程序app.json文件中,對(duì)應(yīng)的window下添加代碼:

"enablePullDownRefresh": true,

2、對(duì)小程序?qū)?yīng)的.js文件中添加data:

data: {
    pageNum: 1,       // 設(shè)置加載的第幾次,默認(rèn)是第一次
    isFirstLoad: true,   // 用于判斷List數(shù)組是不是空數(shù)組,默認(rèn)true,空的數(shù)組
    hasMore: false,    // “加載更多”
  }

3、對(duì)小程序中,添加 onPullDownRefresh 和 onReachBottom方法

// 下拉刷新
  onPullDownRefresh: function () {
    // 顯示導(dǎo)航欄loading
    wx.showNavigationBarLoading();
    // 調(diào)用接口加載數(shù)據(jù)
    //this.loadData();
    // 隱藏導(dǎo)航欄loading
    wx.hideNavigationBarLoading();
    // 當(dāng)處理完數(shù)據(jù)刷新后,wx.stopPullDownRefresh可以停止當(dāng)前頁(yè)面的下拉刷新
    wx.stopPullDownRefresh();
  },
  // 上拉加載
  onReachBottom(e) {
    let that = this;
    if (that.data.hasMore) {
      that.setData({
        pageNum: that.data.pageNum + 1,  // 每次觸發(fā)上拉事件,把pageNum+1
        isFirstLoad: false                // 觸發(fā)到上拉事件,把isFirstLoad設(shè)為為false
      });
 
      //that.loadData();
    }
  }

此項(xiàng)目主要介紹兩個(gè)方法并結(jié)合導(dǎo)航欄loading顯示正在加載的效果。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容