微信小程式上拉載入更多
阿新 • • 發佈:2018-11-08
一、程式碼環境
一開始用的是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() }) }