背景：

第七次人口普查项目使用是微信小程序原生框架，组件是根据用户需求由项目组前端组组长封装完成的。采集小程序正式登记首页列表页面，根据腾讯老哥在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