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

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

本篇文章给大家带来的内容是关于微信小程序实例代码：上拉加载更多的实现方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、代码环境

一开始用的是scroll-view组件，但是真机运用的时候发现上拉加载更多的时候，数据有跳动，对用户交互及其不友好，所以决定修改上拉加载更多的效果

我用的是wepy框架，参照多个网上文档，也参照官方文档主要用的是onReachBottom()事件

二、代码

视图层：

变更内容：{{item.typeText}} ￥{{item.totalFee/100}} 变更时间：{{item.updateTime}} {{updateLoadTxt}} -

说明：如果数据不超过一屏，向上拉回无法触发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() }) }-

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。