首頁 > 軟體

微信小程式實現瀑布流分頁捲動載入

2021-09-15 16:01:05

本文範例為大家分享了微信小程式實現瀑布流分頁捲動載入的具體程式碼,供大家參考,具體內容如下

兩種分頁方式

普通的分頁效果會在頁面底部提供點選下一頁和上一頁的按鈕,在點選了按鈕之後才會觸發調取資料的介面,這種方式的使用者體驗一般

另一種分頁效果不需要使用者點選按鈕,只要瀏覽到當前頁面的後幾條資料時,系統會自動傳送請求獲取後一頁的資料,並展示到頁面上,這樣就可以實現類似無限捲動的效果

以csdn為例,當卷軸到達這個地方時,會自動呼叫請求下一頁資料的介面,然後累加到載入完成的資料列表中

實現思路

捲動分頁的方式存在一個問題,當用戶捲動的非常快時,可能會導致第一次請求還未完成,第二次請求就開始了,為了避免這個問題,我們可以加入一個鎖標識,傳送一次請求後加鎖,請求完成後釋放鎖,這樣就可以完美避免這種問題

得出實現思路

1、判斷是否還有可載入的資料
2、獲取鎖
3、傳送請求,呼叫介面
4、釋放鎖
5、返回資料

程式碼實現

首先我們需要一個paging物件

class Paging{
  page //記錄當前頁碼
  count //記錄一頁顯示的數量
  req //介面請求物件(此處我已封裝,可按照自己需求定義屬性)
  url //請求路徑
  moreData = true //是否存在下一頁資料(首次請求時預設存在下一頁資料)
  accumulator = [] //已載入的資料列表
  locker = false //鎖標識
}

為paging物件定義一個構造器,預設從第一頁開始請求,每頁五條資料

constructor(req, page=0, count=5){
    this.page = page
    this.count = count
    this.req = req
    this.url = req.url
  }

接下來編寫getMoreData方法

getMoreData(){
 //1、判斷是否存在下一頁資料
 //2、獲取鎖,判斷鎖是否為釋放狀態
 //3、請求資料
 //4、釋放鎖
 }

1、判斷是否存在下一頁資料

這裡直接獲取moreData屬性進行判斷

if(!this.moreData){
      return
}

2、獲取鎖

此處新增一個方法,如果當前沒有鎖,代表可以繼續請求資料,在請求資料前先把鎖標識設定為true,防止下次請求繼續傳送

_getLocker(){
    if(this.locker){
      return false
    }
    this.locker = true
    return true
}

3、請求資料

我們需要返回給頁面的資料結構如下:

{
        empty, //是否為空
        items, //當前頁資料
        moreData, //是否存在下一頁資料
        accumulator //已經請求過的所有資料
}

首先定義一個獲取請求結構的方法

 _getCurrentReq(){
    let url = this.url
    //設定請求引數
    const params = `page=${this.page}&count=${this.count}`
    //判斷拼接方式
    if(url.includes('?')){
      url += '&' + params
    }else{
      url += '?' + params
    }
    this.req.url = url
    return this.req
 }

獲取資料的方法如下:

 _actualGetData(){
 
    const req = this._getCurrentReq() //獲取到具體的請求內容
    
    let paging = Http.request(req) //呼叫自定義工具中的請求方法,進行資料的獲取
    
    //如果沒有獲取到結果直接返回null
    if(!paging){
      return null
    }
  
    if(paging.total === 0){
      return {
        empty: true,
        items: [],
        moreData: false,
        accumulator: []
      }
    }
    
    //如果當前頁碼數小於總頁碼數表示還存在下一頁資料,設定moreData為true,否則設定為false
    this.moreData = pageNum < totalPage-1 ? true : false
    
    //如果存在下頁資料,將page+1,便於下次的獲取
    if(this.moreData){
      this.page += 1
    }
    
    //因瀑布流顯示資料需要累加展示,所以資料列表也需要累加
    this.accumulator = this.accumulator.concat(paging.items)
    return{
      empty: false,
      items: paging.items,
      moreData: this.moreData,
      accumulator: this.accumulator
    }
 }

4、釋放鎖

釋放鎖直接將鎖標識的狀態改變即可

this.locker = false

getMoreData方法編寫完畢,然後就可以在對應介面的js檔案中進行呼叫了

在第一次進入介面時,需要自動呼叫一次,然後在使用者每次觸底時再次呼叫

initBottomSpuList(){
 //獲取到paging物件
    const paging = new Paging({
      url: url
    })
    //將paging物件存入js的data中
    this.data.spuPaging = paging
    //呼叫方法
    const data = paging.getMoreData()
    if(!data){
      return
    }
    //重新載入瀑布流
    wx.lin.renderWaterFlow(data.items)
},

微信小程式有自帶的觸底時自動觸發的函數,將方法呼叫的程式碼寫入這個函數即可

onReachBottom: function () {
    const data = this.data.spuPaging.getMoreData()
    if(!data){
      return
    }
    //重新載入瀑布流
    wx.lin.renderWaterFlow(data.items)
}

至此,就可以實現瀑布流分頁捲動載入的效果了

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援it145.com。


IT145.com E-mail:sddin#qq.com