微信小程序案例代碼：上拉加載更多的完成方法

一、代碼環境

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

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

二、代碼

視圖層：

<repeat for="{{recordList}}" key="index" index="index" item="item" >
   <view class="zan-panel">
      <view class="zan-cell">
         <view class="zan-cell__bd">變更內容：{{item.typeText}}</view>
         <view class="zan-cell__ft">￥<text style="padding-left:4rpx">{{item.totalFee/100}}</text></view>
      </view>
      <view class="zan-cell">
         <view class="zan-cell__bd zan-font-12 zan-c-gray-dark">變更時間：{{item.updateTime}}</view>
      </view>
   </view>
</repeat>
<block wx:if="{{recordList.length > pageSize}}">
   <block wx:if="{{updateLoadShow}}">
      <updateLoad :loading="updateLoadShow"></updateLoad>
   </block>
   <view class="doc-description zan-center" style="font-size:12px;" wx:else>
      <text>{{updateLoadTxt}}</text>
   </view>
</block>

說明：如果數據不超過一屏，向上拉回無法觸發onReachBottom()事件，所以我做的處理是 “ （當前屏幕高度 / 實際一個列表循環高度 ）+1”，保證數據能超過一屏。

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

邏輯層寫：

// 上拉加載
onReachBottom() {
    // 上拉加載更多loading
    this.updateLoadShow = true
    let _length = this.recordList.length
    // 列表長度與列表總數對比
    if (_length === this.pagtotal) {
      setTimeout(() => {
        this.updateLoadShow = false
        this.$apply()
      }, 1000)
    } else {
      // 當前頁碼加一
      this.pageNum++
      // 更新數據
      this.getData()
    }
}
// 獲取數據
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()
    })
  }

相關推薦：

微信小程序實例：四個頁面跳轉的方法（附代碼）

微信小程序實例：微信小程序中彈窗的實現代碼

以上就是微信小程序實例代碼：上拉加載更多的實現方法的詳細內容，更多請關注php中文網其它相關文章！