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

微信小程序?qū)崿F(xiàn)瀑布流分頁滾動(dòng)加載

 更新時(shí)間:2021年09月15日 14:18:55   作者:智慧包  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)瀑布流分頁滾動(dòng)加載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)瀑布流分頁滾動(dòng)加載的具體代碼,供大家參考,具體內(nèi)容如下

兩種分頁方式

普通的分頁效果會(huì)在頁面底部提供點(diǎn)擊下一頁和上一頁的按鈕,在點(diǎn)擊了按鈕之后才會(huì)觸發(fā)調(diào)取數(shù)據(jù)的接口,這種方式的用戶體驗(yàn)一般

另一種分頁效果不需要用戶點(diǎn)擊按鈕,只要瀏覽到當(dāng)前頁面的后幾條數(shù)據(jù)時(shí),系統(tǒng)會(huì)自動(dòng)發(fā)送請求獲取后一頁的數(shù)據(jù),并展示到頁面上,這樣就可以實(shí)現(xiàn)類似無限滾動(dòng)的效果

以csdn為例,當(dāng)滾動(dòng)條到達(dá)這個(gè)地方時(shí),會(huì)自動(dòng)調(diào)用請求下一頁數(shù)據(jù)的接口,然后累加到加載完成的數(shù)據(jù)列表中

實(shí)現(xiàn)思路

滾動(dòng)分頁的方式存在一個(gè)問題,當(dāng)用戶滾動(dòng)的非??鞎r(shí),可能會(huì)導(dǎo)致第一次請求還未完成,第二次請求就開始了,為了避免這個(gè)問題,我們可以加入一個(gè)鎖標(biāo)識,發(fā)送一次請求后加鎖,請求完成后釋放鎖,這樣就可以完美避免這種問題

得出實(shí)現(xiàn)思路

1、判斷是否還有可加載的數(shù)據(jù)
2、獲取鎖
3、發(fā)送請求,調(diào)用接口
4、釋放鎖
5、返回?cái)?shù)據(jù)

代碼實(shí)現(xiàn)

首先我們需要一個(gè)paging對象

class Paging{
  page //記錄當(dāng)前頁碼
  count //記錄一頁顯示的數(shù)量
  req //接口請求對象(此處我已封裝,可按照自己需求定義屬性)
  url //請求路徑
  moreData = true //是否存在下一頁數(shù)據(jù)(首次請求時(shí)默認(rèn)存在下一頁數(shù)據(jù))
  accumulator = [] //已加載的數(shù)據(jù)列表
  locker = false //鎖標(biāo)識
}

為paging對象定義一個(gè)構(gòu)造器,默認(rèn)從第一頁開始請求,每頁五條數(shù)據(jù)

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

接下來編寫getMoreData方法

getMoreData(){
 //1、判斷是否存在下一頁數(shù)據(jù)
 //2、獲取鎖,判斷鎖是否為釋放狀態(tài)
 //3、請求數(shù)據(jù)
 //4、釋放鎖
 }

1、判斷是否存在下一頁數(shù)據(jù)

這里直接獲取moreData屬性進(jìn)行判斷

if(!this.moreData){
      return
}

2、獲取鎖

此處新增一個(gè)方法,如果當(dāng)前沒有鎖,代表可以繼續(xù)請求數(shù)據(jù),在請求數(shù)據(jù)前先把鎖標(biāo)識設(shè)置為true,防止下次請求繼續(xù)發(fā)送

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

3、請求數(shù)據(jù)

我們需要返回給頁面的數(shù)據(jù)結(jié)構(gòu)如下:

{
        empty, //是否為空
        items, //當(dāng)前頁數(shù)據(jù)
        moreData, //是否存在下一頁數(shù)據(jù)
        accumulator //已經(jīng)請求過的所有數(shù)據(jù)
}

首先定義一個(gè)獲取請求結(jié)構(gòu)的方法

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

獲取數(shù)據(jù)的方法如下:

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

4、釋放鎖

釋放鎖直接將鎖標(biāo)識的狀態(tài)改變即可

this.locker = false

getMoreData方法編寫完畢,然后就可以在對應(yīng)界面的js文件中進(jìn)行調(diào)用了

在第一次進(jìn)入界面時(shí),需要自動(dòng)調(diào)用一次,然后在用戶每次觸底時(shí)再次調(diào)用

initBottomSpuList(){
 //獲取到paging對象
    const paging = new Paging({
      url: url
    })
    //將paging對象存入js的data中
    this.data.spuPaging = paging
    //調(diào)用方法
    const data = paging.getMoreData()
    if(!data){
      return
    }
    //重新加載瀑布流
    wx.lin.renderWaterFlow(data.items)
},

微信小程序有自帶的觸底時(shí)自動(dòng)觸發(fā)的函數(shù),將方法調(diào)用的代碼寫入這個(gè)函數(shù)即可

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

至此,就可以實(shí)現(xiàn)瀑布流分頁滾動(dòng)加載的效果了

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無效的解決方法

    IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無效的解決方法

    這篇文章主要介紹了IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無效的解決方法,涉及針對javascript加載順序的調(diào)整,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2014-12-12
  • 關(guān)于微信中a鏈接無法跳轉(zhuǎn)問題

    關(guān)于微信中a鏈接無法跳轉(zhuǎn)問題

    微信頁面開發(fā)時(shí),各個(gè)主頁之間的跳轉(zhuǎn),完全是通過a鏈接進(jìn)行的,但是來回跳轉(zhuǎn)幾次,再次從其他主頁面跳回首頁的時(shí)候,微信頭部出現(xiàn)了跳轉(zhuǎn)加載進(jìn)度條,但是就是不跳轉(zhuǎn),也沒有任何反應(yīng),怎么回事呢?下面小編給大家解答下
    2016-08-08
  • 詳解js前端代碼異常監(jiān)控

    詳解js前端代碼異常監(jiān)控

    本文主要介紹了js代碼異常監(jiān)控的相關(guān)知識。具有一定的參考價(jià)值,下面跟著小編一起來看下吧
    2017-01-01
  • js 獲取屏幕各種寬高的方法(瀏覽器兼容)

    js 獲取屏幕各種寬高的方法(瀏覽器兼容)

    js 獲取屏幕各種寬高的方法(瀏覽器兼容),需要的朋友可以參考一下
    2013-05-05
  • 頁面右下角彈出提示框示例代碼js版

    頁面右下角彈出提示框示例代碼js版

    右下角彈出提示框想必大家不會(huì)陌生吧,本文簡單的為大家實(shí)現(xiàn)一個(gè),具體代碼如下,有需求的朋友可以參考下
    2013-08-08
  • JavaScript中7種位運(yùn)算符在實(shí)戰(zhàn)的妙用

    JavaScript中7種位運(yùn)算符在實(shí)戰(zhàn)的妙用

    位運(yùn)算是在數(shù)字底層(即表示數(shù)字的 32 個(gè)數(shù)位)進(jìn)行運(yùn)算的,下面這篇文章主要給大家介紹了關(guān)于JavaScript中7種位運(yùn)算符在實(shí)戰(zhàn)的妙用,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-06-06
  • Bootstrap Paginator分頁插件使用方法詳解

    Bootstrap Paginator分頁插件使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了Bootstrap Paginator分頁插件使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-05-05
  • Spring mvc 接收json對象

    Spring mvc 接收json對象

    這篇文章主要介紹了Spring mvc 接收json數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • JS實(shí)現(xiàn)可調(diào)整倒計(jì)時(shí)間代碼分享

    JS實(shí)現(xiàn)可調(diào)整倒計(jì)時(shí)間代碼分享

    這篇文章主要介紹了JS實(shí)現(xiàn)可調(diào)整倒計(jì)時(shí)間代碼,效果很酷炫,也很具有實(shí)用價(jià)值,感興趣的小伙伴們可以參考一下
    2015-08-08
  • 通過javascript的匿名函數(shù)來分析幾段簡單有趣的代碼

    通過javascript的匿名函數(shù)來分析幾段簡單有趣的代碼

    想起自己很久以前學(xué)習(xí)javascript的經(jīng)歷,也曾經(jīng)碰到過幾個(gè)由匿名函數(shù)造成的困擾(其中一個(gè)就是由閉包引起的),下面就整理幾段簡單代碼討論一下,讓我們大家一起進(jìn)步。
    2010-06-06

最新評論