小潘杂谈

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

字号+ 作者:admin 来源:seo博客 2020-09-07 10:00 我要评论( )

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

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

一、代码环境

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

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

二、代码

视图层:<repeat for="{{recordList}}" key="index" index="index" item="item" ><view>说明:如果数据不超过一屏,向上拉回无法触发onReachBottom()事件,所以我做的处理是“ (当前屏幕高度 / 实际一个列表循环高度 )+1”,保证数据能超过一屏。onLoad() {// 获取系统消息wepy.getSystemInfo({success: (res) => {this.height = res.windowHeightthis.pageSize = Math.round(res.windowHeight / 103) + 1this.$apply()}})}逻辑层写:// 上拉加载onReachBottom() {// 上拉加载更多loadingthis.updateLoadShow = truelet _length = this.recordList.length// 列表长度与列表总数对比if (_length === this.pagtotal) {setTimeout(() => {this.updateLoadShow = falsethis.$apply()}, 1000)} else {// 当前页码加一this.pageNum++// 更新数据this.getData()}}// 获取数据getData() {const pageNum = this.pageNumapi.get(recordURL + 'queryBalanceSub?start=' + pageNum + '&size=' + this.pageSize + '&sortStr=update_time&sortType=desc').then(({data}) => {if (pageNum === 1) {this.recordList = data.listthis.pagtotal = data.totalRow} else {this.recordList = this.recordList.concat(data.list)}this.loadingShow = falsethis.updateLoadShow = falsethis.$apply()})} 相关推荐:

微信小程序实例:四个页面跳转的方法(附代码)

微信小程序实例:微信小程序中弹窗的实现代码以上就是微信小程序实例代码:上拉加载更多的实现方法的详细内容,更多请关注小潘博客其它相关文章!

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。转载请注明seohttp://www.hkxiaopan.com

网友点评
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读