淺談小程式中下拉刷新和上拉載入功能怎麼實現？ （附代碼）

本篇文章為大家介紹一下小程式中實作下拉刷新和上拉載入功能的方法，希望對大家有幫助！

在進行清單資料展示的時候，如果資料比較多或更新比較快，就需要提供上拉刷新和下拉載入的功能，讓提升使用者的體驗。 【相關學習推薦：小程式開發教學】

下拉刷新及上拉載入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的組件特性，根據觸發的時機來控制記載組件的顯隱，整體實現並不是很難，具體程式碼可根據自己的實際情況做適當調整哦。

更多程式相關知識，請造訪：程式設計影片！ ！

以上是淺談小程式中下拉刷新和上拉載入功能怎麼實現？ （附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！