写在前面

列表太长了，原生的 scroll-view 就遭不住了；

当一个页面展示很多信息的时候，会造成小程序页面的卡顿以及白屏。原因有如下几点：

1. 列表数据很大，首次 setData 的时候耗时高
2. 渲染出来的列表 DOM 结构多，每次 setData 都需要创建新的虚拟树、和旧树 diff 操作耗时都比较高
3. 渲染出来的列表 DOM 结构多，占用的内存高，造成页面被系统回收的概率变大。

因此，微信小程序在【扩展能力】中介绍了 recycle-view，长列表组件 来解决这些问题。

引入长列表组件 recycle-view

【长列表组件 属于npm组件，需要参照 小程序中使用npm安装第三方包 使用方法。】

第一步（初始化npm）：
如果你现在的小程序项目还没有使用过 npm组件 或者说你的小程序根目录下没有 package.json 文件，那么，先在命令行执行 npm init --yes；（否则，省去这一步。）

第二步（安装组件）：

npm install --save miniprogram-recycle-view

第三步（构建npm）：
点击开发者工具中的菜单栏：工具 --> 构建 npm

第四步（勾选“使用 npm 模块”选项）：

至此，构建完成后即可使用 npm 包。

长列表组件 recycle-view 的使用

• 参考小程序 recycle-view 文档是有必要的。

let ctx = null
Page({
  onReady: function() {
    ctx = createRecycleContext({
      id: 'recycleId',
      dataKey: 'listData', // 与recycle-item中wx:for的值保持一致
      page: this,
      itemSize: { // 这个参数也可以直接传下面定义的this.itemSizeFunc函数
        width: 375,
        height: 70
      }
    })
  }
})

问题一、如何增加下拉刷新功能？

与 scroll-view 不同，官方的 recycle-view 中并没有提供下拉刷新的功能。需要自己动手操作，改起来也很简单。

1、在小程序对长列表组件构建npm完成之后，文件目录如下图所示：

2、打开 recycle-view.js 文件，在组件属性对象 properties 中添加两个属性：

/**
 * 组件的属性列表
 */
properties: {
	refresherenabled: {
	  type: Boolean,
	  value: true
	},
	refreshertriggered: {
	  type: Boolean,
	  value: false
	},
	...
}

3、在 recycle-view.wxml 文件中给组件 scroll-view 添加属性

refresher-enabled="{{!!refresherenabled}}"
refresher-triggered="{{!!refreshertriggered}}"
refresher-threshold="{{150}}"
bindrefresherrefresh="_refresherrefresh"

4、在 recycle-view.js 文件中添加对应的方法

5、在 recycle-view 中增加相关配置

refresherenabled="{{true}}" // 控制是否开启下拉刷新
refreshertriggered="{{triggered}}" //isstoppull 下拉刷新状态完成之后,结束下拉的状态
bindrefresherrefresh="onRefresh"
lower-threshold="{{100}}"
refresher-threshold="{{150}}"

然后在长列表组件的页面 js 中实现 onRefresh 方法；这样，即可实现长列表组件 recycle-view 的下拉刷新功能

问题二、长列表中如何更新以及重置数据？

if (that.data.pageNo == 1) {
  that.setData({
    triggered: false,
  })
  if(res.data.list.length > 0) {
    that.setData({
      listDataLength: res.data.list.length
    })
    ctx.splice(0, 9999)
    ctx.append(res.data.list)
    ctx.update(0, res.data.list)
    ctx.forceUpdate()
  } else {
    ctx.splice(0, 9999)
    ctx.forceUpdate()
  }
} else {
  that.setData({
    listDataLength: that.data.listDataLength + res.data.list.length,
    triggered: false
  })
  ctx.append(res.data.list)
}

关于长列表组件更新数据，以及重置数据这一块。根据小程序官方文档上面介绍的方法，好像没生效。目前，我使用上面的方法实现了功能。后续如果有更好的实现，我会更新上来。

-----------------(正文完)------------------

前端学习交流群，想进来面基的，可以加群： 685486827，832485817；

写在最后： 约定优于配置 —— 软件开发的简约原则

--------------------------------(完)--------------------------------------

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu
微信： miracle421354532

更多学习资源请关注我的新浪微博…好吗