热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

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

微信小程序|小程序开发微信小程序实例代码:上拉加载更多的实现方法
小程序,上拉加载
微信小程序-小程序开发
本篇文章给大家带来的内容是关于微信小程序实例代码:上拉加载更多的实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
android ppt控制器源码,ubuntu取消独占,tomcat 加花生壳,爬虫软件配置,php网站调试工具,海口关键词seo多少钱lzw
A、代码环境
唱歌评分 源码,前端vscode提示,ubuntu开源壁纸,tomcat欢迎网页,sqlite 配置路径,制作星星的插件,前端框架是神马意思,种子搜索爬虫,php =,武汉 seo,htm企业网站代码,易语言获取网页txt,政府单位出入境模板,大图展示页面,文件管理系统源码 php,国外php百万格子程序汉化版lzw
一开始用的是scroll-view组件,但是真机运用的时候发现上拉加载更多的时候,数据有跳动,对用户交互及其不友好,所以决定修改上拉加载更多的效果
啪啪源码,ubuntu什么显卡好,查看并杀掉tomcat进程,雷达爬虫数据,php8.1.0安装流程,赣州来客seolzw
我用的是wepy框架,参照多个网上文档,也参照官方文档主要用的是onReachBottom()事件

B、代码

视图层:

变更内容:{{item.typeText}} ¥{{item.totalFee/100}} 变更时间:{{item.updateTime}} pageSize}}"> {{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() }) }

相关推荐:

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

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


推荐阅读
  • 后端开发|php教程numbering,addClass,COOKIE,POST,instanceof后端开发-php教程一:php变量商场项目源码,ubuntu安装其他系统,to ... [详细]
  • HTML5大文件传输技术深度解析与实践分享
    本文深入探讨了HTML5在Web前端开发中实现大文件上传的技术细节与实践方法。通过实例分析,详细讲解了如何利用HTML5的相关特性高效、稳定地处理大文件传输问题,并提供了可供参考的代码示例和解决方案。此外,文章还讨论了常见的技术挑战及优化策略,旨在帮助开发者更好地理解和应用HTML5大文件上传技术。 ... [详细]
  • 使用wepy开发小程序,为什么设置pages路径的时候总是找不到js文件? ... [详细]
  • 如何使用Python高效绘制矩形图形
    本文详细介绍了如何利用Python的Turtle库高效绘制矩形图形,适合初学者快速上手。通过具体示例代码,帮助读者理解Turtle库的基本绘图方法和技巧,同时探讨了在不同应用场景中绘制矩形的实际操作,为后续复杂图形的绘制打下坚实基础。 ... [详细]
  • 浅析PHP中$_SERVER[
    在PHP后端开发中,`$_SERVER["HTTP_REFERER"]` 是一个非常有用的超级全局变量,它可以获取用户访问当前页面之前的URL。本文将详细介绍该变量的使用方法及其在不同场景下的应用,如页面跳转跟踪、安全验证和用户行为分析等。通过实例解析,帮助开发者更好地理解和利用这一功能。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • Java 零基础入门:SQL Server 学习笔记(第21篇)
    Java 零基础入门:SQL Server 学习笔记(第21篇) ... [详细]
  • MySQL性能优化与调参指南【数据库管理】
    本文详细探讨了MySQL数据库的性能优化与参数调整技巧,旨在帮助数据库管理员和开发人员提升系统的运行效率。内容涵盖索引优化、查询优化、配置参数调整等方面,结合实际案例进行深入分析,提供实用的操作建议。此外,还介绍了常见的性能监控工具和方法,助力读者全面掌握MySQL性能优化的核心技能。 ... [详细]
  • 轻松实现MySQL数据库自动备份【数据库管理】
    本文介绍了如何通过简单的步骤实现MySQL数据库的自动备份。具体方法是将一段脚本保存为批处理文件(.bat),该脚本可以定期执行数据库备份任务。此外,还提供了在不同操作系统和开发环境中配置备份任务的示例,包括VSCodium、Ubuntu代理设置以及Tomcat服务器的相关配置。这不仅提高了数据安全性,还简化了数据库管理流程。 ... [详细]
  • 【Python爬虫实操】 不创作小说,专精网站内容迁移,超高效!(含源代码)
    本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移,涵盖前端、后端及Android相关知识点。通过具体实例和源代码,展示了如何精准抓取并迁移网站内容,适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]
  • Python正则表达式详解:掌握数量词用法轻松上手
    Python正则表达式详解:掌握数量词用法轻松上手 ... [详细]
  • 微信小程序的核心功能与优势在于其独特的运行环境,区别于传统网页应用,它不依赖于浏览器的BOM和DOM对象,因此无法通过常规的`console.log(window)`或`console.log(document)`获取相关信息。此外,小程序还具备一系列专有特性,如高效的数据绑定、丰富的API接口以及良好的用户交互体验,这些都为开发者提供了更为灵活和强大的开发工具,使得小程序能够更好地适应移动互联网时代的需求。 ... [详细]
  • linux screen 配置(下标高亮)
    2019独角兽企业重金招聘Python工程师标准vimetcscreenrc文件,配置改为如下:##Thisisanexampleforthegl ... [详细]
  • 滴滴官网首页3d地球动画反译实现
    最近有个页面的效果需求,要实现一个3D地球的动画效果,在寻找效果参考时看到didiGlobel官网的效果很好,所以就想把这个 ... [详细]
  • Linux命令如何查询小程序中的WePY云开发
    这篇文章给大家分享的是有关Linux命令如何查询小程序中的WePY云开发的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。W ... [详细]
author-avatar
xinzhugedonny
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有