這篇文章給大家分享的是有關(guān)微信小程序如何實(shí)現(xiàn)上拉加載更多的功能的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)瑤海免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

一、代碼環(huán)境

一開始用的是scroll-view組件，但是真機(jī)運(yùn)用的時候發(fā)現(xiàn)上拉加載更多的時候，數(shù)據(jù)有跳動，對用戶交互及其不友好，所以決定修改上拉加載更多的效果

我用的是wepy框架，參照多個網(wǎng)上文檔，也參照官方文檔主要用的是onReachBottom()事件

二、代碼

視圖層：

   
      
         變更內(nèi)容：{{item.typeText}}
         ￥{{item.totalFee/100}}
      
      
         變更時間：{{item.updateTime}}
      
   

 pageSize}}">
   
      
   
   
      {{updateLoadTxt}}
   

說明：如果數(shù)據(jù)不超過一屏，向上拉回?zé)o法觸發(fā)onReachBottom()事件，所以我做的處理是   “ （當(dāng)前屏幕高度 /實(shí)際一個列表循環(huán)高度 ）+1”，保證數(shù)據(jù)能超過一屏。

onLoad() {
    // 獲取系統(tǒng)消息
    wepy.getSystemInfo({
      success: (res) => {
        this.height = res.windowHeight
        this.pageSize = Math.round(res.windowHeight / 103) + 1
        this.$apply()
      }
    })
}

邏輯層寫：

// 上拉加載
onReachBottom() {
    // 上拉加載更多l(xiāng)oading
    this.updateLoadShow = true
    let _length = this.recordList.length
    // 列表長度與列表總數(shù)對比
    if (_length === this.pagtotal) {
      setTimeout(() => {
        this.updateLoadShow = false
        this.$apply()
      }, 1000)
    } else {
      // 當(dāng)前頁碼加一
      this.pageNum++
      // 更新數(shù)據(jù)
      this.getData()
    }
}
// 獲取數(shù)據(jù)
getData() {
    const pageNum = this.pageNum
    api.get(recordURL + 'queryBalanceSub?start=' + pageNum + '&size=' + this.pageSize + '&sortStr=update_time&sortType=desc').then(({data}) => {
      if (pageNum === 1) {
        this.recordList = data.list
        this.pagtotal = data.totalRow
      } else {
        this.recordList = this.recordList.concat(data.list)
      }
      this.loadingShow = false
      this.updateLoadShow = false
      this.$apply()
    })
  }

感謝各位的閱讀！關(guān)于“微信小程序如何實(shí)現(xiàn)上拉加載更多的功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！