微信小程序实例代码：上拉加载更多的实现方法

一、代码环境

一开始用的是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()     })   }

相关推荐：

微信小程序实例：四个页面跳转的方法（附代码）

微信小程序实例：微信小程序中弹窗的实现代码

以上就是微信小程序实例代码：上拉加载更多的实现方法的详细内容，更多内容请关注技术你好其它相关文章！