背景：

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

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

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

1.下載 recycle-view 組件

npm install --save miniprogram-recycle-view

項目的所有組件統一放在 components 文件夾下，將 miniprogram_dist 文件夾下的文件放在小程序項目的 components 文件夾下的 recycle-view 文件夾下。

2.使用 recycle-view 組件

頁面中引入組件，在對應文件的 json 文件中填寫文件路徑：

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

3.在WXML中使用

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

注解：

height// recycleView的高度，可以是固定值，因業務需求博主這里是變量bindscrolltolower// recycle-view 組件自定義事件，判斷是否滾動到底部scroll-with-animation// 是否開啟滾動動畫

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 () {}, // 一定要留一個空的onPageScroll函數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 }) }

小結：

本篇文章主要是講博主可以使用一次 recycle-view 組件優化長列表的過程，可能很多人看到后會一頭霧水，新手還請借鑒“微信小程序擴展組件長列表優化官方文檔”。長列表優化還有哪些解決方案？還請有知道的大佬評論留言給出見解。

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。