本篇文章给大家带来的内容是关于微信小程序实例代码：上拉加载更多的实现方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、代码环境
一开始用的是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() }) }
相关推荐：
微信小程序实例：四个页面跳转的方法（附代码）
微信小程序实例：微信小程序中弹窗的实现代码
以上就是微信小程序实例代码：上拉加载更多的实现方法的详细内容。