背景：

第七次人口普查項(xiàng)目使用是微信小程序原生框架，組件是根據(jù)用戶需求由項(xiàng)目組前端組組長(zhǎng)封裝完成的。采集小程序正式登記首頁(yè)列表頁(yè)面，根據(jù)騰訊老哥在sentry上的監(jiān)控可以看出，列表頁(yè)面前端性能比較差，主要表現(xiàn)在一些較老機(jī)型，例如：OPPOR9這些較老的機(jī)型在頁(yè)面渲染數(shù)據(jù)量較大的時(shí)候出現(xiàn)白屏、卡頓等問(wèn)題。

針對(duì)以上問(wèn)題，騰訊老哥提供了一個(gè)解決方案，主要是采用微信小程序官方提供的 recycle-view 組件優(yōu)化列表頁(yè)面性能，提升用戶使用體驗(yàn)。

下面將還原需求場(chǎng)景，并且演示 recycle-view 組件的用法。

1.下載 recycle-view 組件

npm install --save miniprogram-recycle-view

項(xiàng)目的所有組件統(tǒng)一放在 components 文件夾下，將 miniprogram_dist 文件夾下的文件放在小程序項(xiàng)目的 components 文件夾下的 recycle-view 文件夾下。

2.使用 recycle-view 組件

頁(yè)面中引入組件，在對(duì)應(yīng)文件的 json 文件中填寫(xiě)文件路徑：

{ "usingComponents": { "recycle-view": "../../components/recycle-view/recycle-view", "recycle-item": "../../components/recycle-view/recycle-item" }

3.在WXML中使用

{{item.idx+1}}. {{item.title}}

注解：

height// recycleView的高度，可以是固定值，因業(yè)務(wù)需求博主這里是變量bindscrolltolower// recycle-view 組件自定義事件，判斷是否滾動(dòng)到底部scroll-with-animation// 是否開(kāi)啟滾動(dòng)動(dòng)畫(huà)

4.recycle-view 配置

onLoad: function (options) {const ctx = createRecycleContext({ id: 'recycleId', dataKey: 'formalList', page: this, itemSize: function (item, index) { return { width: systemInfo.windowWidth, height: 70 } } } }

5.recycle-view 自定義方法

onPageScroll: function () {}, // 一定要留一個(gè)空的onPageScroll函數(shù)scrollToLower: function (e) { if (this.isScrollToLower) return this.isScrollToLower = true this.page = this.page + 1 const {formalList, isScrollToLower} = this.getFormalList(true) this.ctx.append(formalList, () => { this.isScrollToLower = isScrollToLower }) }

小結(jié)：

本篇文章主要是講博主可以使用一次 recycle-view 組件優(yōu)化長(zhǎng)列表的過(guò)程，可能很多人看到后會(huì)一頭霧水，新手還請(qǐng)借鑒“微信小程序擴(kuò)展組件長(zhǎng)列表優(yōu)化官方文檔”。長(zhǎng)列表優(yōu)化還有哪些解決方案？還請(qǐng)有知道的大佬評(píng)論留言給出見(jiàn)解。

傳送門：https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/recycle-view.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的判断 小程序 是否 滚动到页面底部 scrolltolower_微信小程序长列表性能优化——recycle-view的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。