微信小程序 — 长列表组件 recycle-view 详细教学

ゞ浴缸里的玫瑰 2022-09-08 03:47 1806阅读 0赞

### 微信小程序 — 长列表组件 recycle-view 踩坑问题全解 ###

*  写在前面
 *  引入长列表组件 recycle-view
 *  长列表组件 recycle-view 的使用
 *   *   *  问题一、如何增加下拉刷新功能？
         *  问题二、长列表中如何更新以及重置数据？

# 写在前面 #

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

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

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

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

# 引入长列表组件 recycle-view #

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

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

第二步（安装组件）：

npm install --save miniprogram-recycle-view

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

第四步（勾选“使用 npm 模块”选项）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70_pic_left]

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

# 长列表组件 recycle-view 的使用 #

*  参考[小程序 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`完成之后，文件目录如下图所示：  
![在这里插入图片描述][ceea1dab0d22421bbb9766e4a5caec38.png_pic_left]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 1]  
4、在 `recycle-view.js` 文件中添加对应的方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 2]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 3]

然后在长列表组件的页面 `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；  
![Vue学习交流][Vue] ![React学习交流][Vue]

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

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

我的：  
个人网站： [https://neveryu.github.io/neveryu/][https_neveryu.github.io_neveryu]  
Github： [https://github.com/Neveryu][https_github.com_Neveryu]  
新浪微博： [https://weibo.com/Neveryu][https_weibo.com_Neveryu]  
微信： miracle421354532

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

[recycle-view]: https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/recycle-view.html
[npm]: https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70_pic_left]: /images/20220829/ab99c221c6294922ab705531d7044d05.png
[ceea1dab0d22421bbb9766e4a5caec38.png_pic_left]: /images/20220829/f63a8a0f92d04772a838ba871198d071.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70]: /images/20220829/789db3b734514119bdee3b764fd18cb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 1]: /images/20220829/b201aa24ec3b40e5b6bd6159b2f1d43a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 2]: /images/20220829/ec09b595241445099227c14158485c40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 3]: /images/20220829/e09e2ea935624299846a60995d285201.png
[Vue]: 
[https_neveryu.github.io_neveryu]: https://neveryu.github.io/neveryu/
[https_github.com_Neveryu]: https://github.com/Neveryu
[https_weibo.com_Neveryu]: https://weibo.com/Neveryu