摘要:內(nèi)存不足起因小程序?qū)τ脩魞?nèi)存使用進(jìn)行了限制,如果一個頁面的圖片過多,會導(dǎo)致內(nèi)存不足的內(nèi)部錯誤解決辦法對圖片進(jìn)行懶加載,不影響體驗的前提下,只渲染當(dāng)屏的圖片,屏外圖片,顯示缺省圖實踐分析圖片最多的情況就是列表頭圖或圖片列表,為了性能,一般會滾
內(nèi)存不足起因
小程序?qū)τ脩魞?nèi)存使用進(jìn)行了限制,如果一個頁面的圖片過多,會導(dǎo)致內(nèi)存不足的內(nèi)部錯誤解決辦法
對圖片進(jìn)行懶加載,不影響體驗的前提下,只渲染當(dāng)屏的圖片,屏外圖片,顯示缺省圖實踐分析
圖片最多的情況就是列表(頭圖或圖片列表),為了性能,一般會滾動加載,而在小程序中,需要借助scroll-view/swiper組件,為了不影響用戶體驗,就不能讓之前以渲染的列表元素失去占位
要判斷元素是否在當(dāng)屏,就要知道一些高度信息(屏幕高,滾動高度,元素高度),但是元素高度在小程序中不能動態(tài)獲取,所以就需要列表時定高的
代碼wxml文件
計算showIndex的方法,可作為公用方法
/** * offetHeight 滾動計算部分到頂部距離 * scrollTop 滾動高度 * height 每個模塊的高度 * colunm 列數(shù) **/ 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個元素的圖片
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/115457.html
摘要:內(nèi)存不足起因小程序?qū)τ脩魞?nèi)存使用進(jìn)行了限制,如果一個頁面的圖片過多,會導(dǎo)致內(nèi)存不足的內(nèi)部錯誤解決辦法對圖片進(jìn)行懶加載,不影響體驗的前提下,只渲染當(dāng)屏的圖片,屏外圖片,顯示缺省圖實踐分析圖片最多的情況就是列表頭圖或圖片列表,為了性能,一般會滾 內(nèi)存不足起因 小程序?qū)τ脩魞?nèi)存使用進(jìn)行了限制,如果一個頁面的圖片過多,會導(dǎo)致內(nèi)存不足的內(nèi)部錯誤 解決辦法 對圖片進(jìn)行懶加載,不影響體驗的前提下,只...
摘要:內(nèi)存不足起因小程序?qū)τ脩魞?nèi)存使用進(jìn)行了限制,如果一個頁面的圖片過多,會導(dǎo)致內(nèi)存不足的內(nèi)部錯誤解決辦法對圖片進(jìn)行懶加載,不影響體驗的前提下,只渲染當(dāng)屏的圖片,屏外圖片,顯示缺省圖實踐分析圖片最多的情況就是列表頭圖或圖片列表,為了性能,一般會滾 內(nèi)存不足起因 小程序?qū)τ脩魞?nèi)存使用進(jìn)行了限制,如果一個頁面的圖片過多,會導(dǎo)致內(nèi)存不足的內(nèi)部錯誤 解決辦法 對圖片進(jìn)行懶加載,不影響體驗的前提下,只...
摘要:論壇上有過這么一篇熱門文章,它從角度分析了無限滾動加載的設(shè)計實踐。無限滾動加載背后的技術(shù)挑戰(zhàn)其實比想象中要多不少。整體思路和方案設(shè)計我們要實現(xiàn)的頁面樣例如圖,它能夠做到無限下拉加載內(nèi)容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices,它從UX角度分析了無限滾動加載的設(shè)計實踐。 無限滾動加載在互聯(lián)網(wǎng)上到處都有應(yīng)用:豆瓣...
摘要:論壇上有過這么一篇熱門文章,它從角度分析了無限滾動加載的設(shè)計實踐。無限滾動加載背后的技術(shù)挑戰(zhàn)其實比想象中要多不少。整體思路和方案設(shè)計我們要實現(xiàn)的頁面樣例如圖,它能夠做到無限下拉加載內(nèi)容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices,它從UX角度分析了無限滾動加載的設(shè)計實踐。 無限滾動加載在互聯(lián)網(wǎng)上到處都有應(yīng)用:豆瓣...
閱讀 1308·2021-11-15 11:37
閱讀 2564·2021-09-22 10:56
閱讀 3390·2021-09-06 15:11
閱讀 801·2021-08-31 09:45
閱讀 2897·2021-07-28 11:16
閱讀 1806·2019-08-30 15:44
閱讀 476·2019-08-30 13:22
閱讀 3344·2019-08-30 13:18