本篇文章帶給大家的內容是關於微信小程式實例程式碼：上拉載入更多的實作方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、程式碼環境
一開始用的是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中文網其他相關文章！
