如何實現小程序中下拉刷新和上拉加載功能

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

下拉刷新及上拉加載wxml文件編寫

當我們使用scroll-view滑動組件展示列表時，其本身就存在下拉刷新和上拉加載的觸發函數

<scroll-view class="scroll" scroll-y="{{true}}" upper-threshold="50"   
bindscrolltoupper="refresh"  style="height:700px">
  <l-loadmore show="{{upfresh}}" bindscrolltolower="getMore"  type="loading" loading-text="拼命刷新中">
</l-loadmore>

<l-loadmore show="{{downfresh}}" type="loading" loading-text="拼命加載中">
</l-loadmore>

• scroll-y: 是否允許縱向滾動，默認為false,這里我們設置為true

• upper-threshold: 距頂部/左邊多遠時，觸發 scrolltoupper 事件（下拉刷新）

• bindscrolltoupper:滾動到頂部/左邊時觸發,這里設置滾動到頂部需要觸發的函數

• bindscrolltolower：滾動到頂部/右邊時觸發

引入line-ui框架

這里我使用的下拉刷新和上拉加載展示組件是lin-ui框架提供的，這里我說下如何引入lin-ui框架：

lin-ui官方文檔地址

//在小程序項目目錄中執行下面的函數
npm install lin-ui

然后在需要引入組件的頁面的json文件中進行引入

"usingComponents": {
    "l-loadmore":"/miniprogram_npm/lin-ui/loadmore/index",
    "l-loading":"/miniprogram_npm/lin-ui/loading/index",
  },

這樣lin-ui組件就引入成功了

js代碼編寫

data: {
    downfresh:false,//底部加載展示控制
    upfresh:false//頂部加載展示控制
  },

首先在data中設置加載組件是否顯示，默認都不顯示

下拉刷新js代碼

//下拉刷新
refresh(){
    if(this.data.upfresh){
      console.log("還沒刷新完成")
      return;
    }
    var that = this;
    this.setData({
      upfresh: true,
      // upfresh:false
    })
   
    setTimeout(function() {
      //updateData為自己的數據更新邏輯代碼
      that.updateData(true,()=>{
        that.setData({
          upfresh: false,
      });
     })
      // wx.hideLoading();
    console.info('下拉刷新加載完成.');
  }, 500);
  },
    
      //更新數據
   updateData:function(tail, callback) {
  
    var that = this;
    console.log("updatedata-=-=seea"+that.data.searchValue)
    wx.request({
      url: app.gBaseUrl + 'compony-detail/page',
      method: 'GET',
      data: {
        page: 0,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        this.setData({
          componys: res.data
        })
        if (callback) {
          callback();
        }
      }
    })
   },

上拉加載js代碼

 /**
   * 滑動到底部加載更多
   */
  getMore(){
    // downloadingData=this.data.downloadingData
    if(this.data.downfresh){
      console.log("還沒加載完成")
      return;
    }
   var that = this;
    this.setData({
      downfresh: true,
      // upfresh:false
    })
   
    this.setData({
      downloadingData: true
      // upfresh:false
    })

    setTimeout(function() {
      that.loadData(true,()=>{
        that.setData({
        downfresh: false
      });
     })
      // wx.hideLoading();
    console.info('上拉數據加載完成.');
  }, 1000);
  },
    
      loadData: function(tail, callback) {
    var that = this;
    wx.request({
      url: app.gBaseUrl + 'compony-detail/page',
      method: 'GET',
      data: {
        page: that.data.componys.length,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        // console.log(JSON.stringify(res.data))
        that.setData({
          componys: that.data.componys.concat(res.data),
        });
        if (callback) {
          callback();
        }
      }
    })
  },

整個下拉刷新和上拉加載的功能我們就已經實現了，主要就是利用到了scroll-view的組件特性，根據觸發的時機來控制記載組件的顯隱，整體實現并不是很難，具體代碼可根據自己的實際情況做適當調整哦。

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