微信小程序 下拉刷新 性能优化 参考饿了么小程序首页列表加载

最新推荐文章于 2023-03-31 11:53:22 发布
最新推荐文章于 2023-03-31 11:53:22 发布
阅读量1k 收藏 4
点赞数 4
文章标签： 小程序分页加载 小程序列表刷新优化 参考饿了么小程序的首页加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34613555/article/details/85164379
版权

为了提升小程序的用户体验 ，下来刷新列表图片可以用懒加载的，分页加载用concat 添加，我个人用的方法是每请求一页数据就增加一个数组，用来存放获取到的数据，这样setData重新更新数据的时候就只需要更新一组数据就可以，也不会使得set的数据过长
分段加载数据

最重要的点是：先用隐藏的图片 把线上的图片加载完成后再全部显示当前页

在这里插入图片描述
用的是image自带的加载完成的方法
加载图片完成的方法
每当加载完一页之后 就全部显示出来
在加载的过程中尽量设置不能请求新的数据 一次性加载太多图片的话 体验会变的很不好 IOS还好一点 安卓性能比较差的有时候会直接崩溃
首次写博客 文笔实在差 大家能看就看哈 ！！！！

qq_34613555
关注
专栏目录
小白学习微信小程序的下拉刷新和上拉加载更多
wx_linying1029的博客
08-12 541
下拉刷新和上拉加载更多内容是微信小程序中常见的功能之一，本文将详细介绍如何使用代码实现这两个功能。下拉刷新通常用于在页面顶部下拉时刷新页面内容，而上拉加载更多用于在页面底部上拉时加载更多内容。这两个功能可以通过微信小程序提供的相关 API 来实现。
微信小程序 下拉刷新，tab切换 (源码)
05-31
微信小程序 下拉刷新，tab切换 (源码)微信小程序 下拉刷新，tab切换 (源码)微信小程序 下拉刷新，tab切换 (源码)微信小程序 下拉刷新，tab切换 (源码)微信小程序 下拉刷新，tab切换 (源码)微信小程序 下拉刷新，tab...
element ui（饿了么）树组件懒加载节点和手工添加节点的方法。
deping_chen的专栏
07-16 1839
我是通过vue-property-decorator使用typescript编码的。 懒加载或者动态加载文档上有例子，这里重复一下。手工添加节点没有，希望可以帮到大家。 element树 <el-tree ref="tree" node-key="id" :props="props" :load="loadNode" lazy @node-click="handleNodeClick" highlight-current :render-content="renderContentFunc"&
微信小程序下拉刷新优化
weixin_41160560的博客
03-23 556
微信小程序下拉刷新 /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { //0.5s加载显示，如果不加会一直显示加载中，造成不好的用户体验 var that = this wx.showNavigationBarLoading() //在标题栏中显示加载 setTimeout(...
如何微信小程序优化？
2301_77175448的博客
03-31 1015
总之，微信小程序优化是一个持续迭代的过程，需要不断地寻找问题并加以解决，才能不断提高小程序的性能表现，提升用户体验。1. 提高小程序加载速度：小程序的加载速度对于用户体验有很大影响，可以通过减少文件大小、合并相同请求、使用 CDN 等方式来提升加载速度。6. 使用分包加载：将小程序中的页面分为多个包，可以减少小程序首次启动的时间，并且可以优化小程序在运行时的性能表现。5. 优化渲染：小程序在渲染页面时会影响性能，可以通过优化布局、减少层级等方式来提高小程序的性能。
微信小程序首页加载的优化
weixin_45695200的博客
09-15 2725
冷启动 如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。 触发场景 新用户第一个进入小程序 用户已经进入过小程序，但小程序被销毁（原因：小程序被删除或小程序在后台等待时间过长，自动销毁了） 首屏加载慢大部分原因是冷启动时加载的数据过多，需要依赖过多的服务端的接口数据等 热启动 如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。 触发场景：用户打开了小程序，在小程序没有被销毁时再次打开小
小程序的渲染瓶颈，首屏加载优化
qq_40409143的博客
03-27 2981
小程序的js ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。理解 JavaScript 是 ECMAScript 一种实现后，可以帮助开发者理解小程序中的 JavaScript同浏览器中的 JavaScript 以及 NodeJS 中的 JavaScript 是不相同的。 浏览器中，脚本严格按照加载的顺序执行，而在小程序中的脚本执行顺序有所不同。小程序的执行的入口文件是 app.js 。并且会根据其中
微信小程序实现下拉刷新动画
10-16
在微信小程序中，实现下拉刷新动画涉及到对小程序的基础组件、事件监听以及动画API的深入理解。本文将详细解析如何利用微信小程序的动画机制来创建一个动态效果的下拉刷新功能。 首先，我们需要了解微信小程序的...
微信小程序下拉刷新上拉加载组件
01-27
基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画，有灵感的朋友可以丰富更多下拉动画 在线征集 在线征集下拉刷新动画创意,你可以发草图,或者psd,AE等文件到邮箱：. 只要...
微信小程序源码-仿饿了么.zip
最新发布
03-24
微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序...
微信小程序 下拉刷新及上拉加载原理解析
10-16
微信小程序提供了两种数据交互方式来提升用户操作的流畅度和用户体验，这两种方式分别是下拉刷新和上拉加载更多。下拉刷新通常用于获取最新的数据列表，而上拉加载更多则用于在列表内容即将触底时加载更多内容。这两...
微信小程序页面滑动屏幕加载数据效果
08-29
主要为大家详细介绍了微信小程序页面滑动屏幕加载数据效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
如何解决微信小程序加载慢的问题？
LeoL1u的博客
08-11 1万+
如何解决微信小程序加载慢的问题？ a.提高页面加载速度: 1. 首先用户在页面切换也就是路由跳转时,会有一个100m-300m的一个时间，我们可以利用这个时间段,预先发起新页面所需要的网络加载时间。 2.例如从A页面预加载B页面时,我们可以通过在A页面通过this.$route的方法向B页面传递参数,B页面接收到参数之后利用我们封装好的全局put take的方法,利用缓存来进行ajax请求 疑难:为什么我在A页面时会访问到B页面的实例呢？此时B页面不是未创建吗? 解答:
微信小程序列表懒加载
coderW的博客
12-11 5668
基于微信小程序原生API实现数据列表懒加载一、子组件二、父组件 基于wepy的项目需要实现小程序的列表懒加载 没找到合适的微信小程序懒加载插件,找的资料基本都是图片懒加载,于是自己实现 小程序API档:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html 主要基于onReachBottom...
微信小程序页面始终停留在下拉状态的bug解决
qq_39743700的博客
03-01 890
解决方法 在index.js 的 onShow: function () { wx.startPullDownRefresh() }, 函数中，设置了打开页面的时候就立即下拉，并调用search()函数。 该函数的**wx.stopPullDownRefresh()**存在问题，现在已更换了函数执行逻辑，并在onShow中直接调用search()，暂时解决了问题。 ...
微信小程序下拉加载 多次加载的问题
lz18513030476的博客
04-29 984
下拉时遇到了多次加载更多的问题,导致page页错乱.在加载过程中不允许滑动. wx.showLoading({ title: '正在加载', mask: true, }); mask:true 可以禁止列表的滑动. ...
微信小程序实现图片懒加载的懒办法（思路参考）
热门推荐
yang7789的博客
11-30 2万+
微信小程序中，由于没有办法实现DEMO操作，位置的操作在小程序中很难进行，所以要实现图片的懒加载是真的难啊（简直操碎了心~~）！！！懒加载的实现无非就那几个办法，说白了就是按需加载、监听滚动条加载、延时加载。。。说明：此方法只适用于有明确统一高度的图片排列！不说那么多了，直接上方法了首先，我们在本地先放上一张图片（index.png），然后我们再来看张图片~~嘤嘤嘤图中每个模块的高度应该是Demo的
小程序自定义下拉刷新（Taro版）
weixin_34117522的博客
06-03 5360
在考虑实现自定义的下拉刷新组件的时候，首先要明确，这个算是一种hack方案。并不是说自定义的有多么好，反而自定义的下拉刷新在android下会有细微的卡顿（我这种实现方式）。所以尽量还是用小程序自带的吧。 这个实现主要是参考艾伦大佬的组件。 实现方式 我们将页面分为下面的结构 正常的时候下拉刷新区域的高度为0。 然后我们通过scroll-view的scrollTo...
微信小程序界面下拉刷新实现方法
Joychen404的博客
05-25 1万+
微信小程序中，通过下拉刷新页面是基本操作，在当前页面排满的情况下继续下拉加载更多内容。小程序和网页都可以实现这一功能，不同的是小程序界面有能实现下拉刷新功能的API，只需从系统调用即可。通过查看微信开发文档可知，enablePullDownRefresh 这个属性设置为true。就默认开启了下拉刷新。enablePullDownRefresh可以写在app.json 中 和页面的xxx.json，...
微信小程序实现列表上拉加载与下拉刷新详细教程
"微信小程序列表的上拉加载和下拉刷新实现教程" 在微信小程序中，实现列表的上拉加载和下拉刷新是提高用户体验的重要功能。这两个特性允许用户在滚动到列表底部时加载更多数据，在顶部则可以刷新已有内容。以下将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值