摘要:内存不足起因小程序对用户内存使用进行了限制,如果一个页面的图片过多,会导致内存不足的内部错误解决办法对图片进行懒加载,不影响体验的前提下,只渲染当屏的图片,屏外图片,显示缺省图实践分析图片最多的情况就是列表头图或图片列表,为了性能,一般会滚
内存不足起因
小程序对用户内存使用进行了限制,如果一个页面的图片过多,会导致内存不足的内部错误解决办法
对图片进行懒加载,不影响体验的前提下,只渲染当屏的图片,屏外图片,显示缺省图实践分析
图片最多的情况就是列表(头图或图片列表),为了性能,一般会滚动加载,而在小程序中,需要借助scroll-view/swiper组件,为了不影响用户体验,就不能让之前以渲染的列表元素失去占位
要判断元素是否在当屏,就要知道一些高度信息(屏幕高,滚动高度,元素高度),但是元素高度在小程序中不能动态获取,所以就需要列表时定高的
代码wxml文件
计算showIndex的方法,可作为公用方法
/** * offetHeight 滚动计算部分到顶部距离 * scrollTop 滚动高度 * height 每个模块的高度 * colunm 列数 **/ function countIndex (offetHight, scrollTop, height, colunm) { // 单例获取屏幕宽度比 if (!countIndex.pix) { try { let res = wx.getSystemInfoSync() countIndex.pix = res.windowWidth / 375 } catch (e) { countIndex.pix = 1 } } let scroll = scrollTop - offetHight * countIndex.pix let hei = height * countIndex.pix return scroll > 0 ? Math.floor(scroll / hei) * colunm : 0 }
js文件
let wxTools = require("../../untils/wxTools.js") Page({ data: { scrollData: { offetHeight: 15, // px height: 80, // px colunm: 3 }, showIndex: 0 }, scrollHide (e) { let data = [ this.data.scrollData.offetHeight, e.detail.scrollTop, this.data.scrollData.height, this.data.scrollData.colunm ] let index = wxTools.countIndex(...data) this.setData({ showIndex: index }) } })
具体要渲染多少的元素,自己来定,这里没有放到countIndex中加入计算,例如wxml中的{{showIndex + 24 > index && showIndex - 6 < index}},会渲染30个元素的图片
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115457.html
摘要:内存不足起因小程序对用户内存使用进行了限制,如果一个页面的图片过多,会导致内存不足的内部错误解决办法对图片进行懒加载,不影响体验的前提下,只渲染当屏的图片,屏外图片,显示缺省图实践分析图片最多的情况就是列表头图或图片列表,为了性能,一般会滚 内存不足起因 小程序对用户内存使用进行了限制,如果一个页面的图片过多,会导致内存不足的内部错误 解决办法 对图片进行懒加载,不影响体验的前提下,只...
摘要:内存不足起因小程序对用户内存使用进行了限制,如果一个页面的图片过多,会导致内存不足的内部错误解决办法对图片进行懒加载,不影响体验的前提下,只渲染当屏的图片,屏外图片,显示缺省图实践分析图片最多的情况就是列表头图或图片列表,为了性能,一般会滚 内存不足起因 小程序对用户内存使用进行了限制,如果一个页面的图片过多,会导致内存不足的内部错误 解决办法 对图片进行懒加载,不影响体验的前提下,只...
摘要:论坛上有过这么一篇热门文章,它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图,它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices,它从UX角度分析了无限滚动加载的设计实践。 无限滚动加载在互联网上到处都有应用:豆瓣...
摘要:论坛上有过这么一篇热门文章,它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图,它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices,它从UX角度分析了无限滚动加载的设计实践。 无限滚动加载在互联网上到处都有应用:豆瓣...
阅读 1271·2021-11-15 11:37
阅读 2527·2021-09-22 10:56
阅读 3346·2021-09-06 15:11
阅读 772·2021-08-31 09:45
阅读 2855·2021-07-28 11:16
阅读 1777·2019-08-30 15:44
阅读 370·2019-08-30 13:22
阅读 3317·2019-08-30 13:18