写在前面

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

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

列表数据很大，首次 setData 的时候耗时高
渲染出来的列表 DOM 结构多，每次 setData 都需要创建新的虚拟树、和旧树 diff 操作耗时都比较高
渲染出来的列表 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

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

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

判断小程序是否滚动到页面底部 scrolltolower_微信小程序长列表性能优化——recycle-view
背景: 第七次人口普查项目使用是微信小程序原生框架,组件是根据用户需求由项目组前端组组长封装完成的.采集小程序正式登记首页列表页面,根据腾讯老哥在sentry上的监控可以看出,列表页面前端性能比较差, ...
微信小程序长列表数据渲染的些许优化
开始写长列表的时候,是将分页数据合并到一起在重新渲染,发现正常浏览还行,但是数据超过200多条的时候,新数据会出现一段白屏时间.于是做了如下些许优化 var datalistt = res.datav ...
微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
微信小程序的常用组件
目录一.常用的视图容器类组件 ① view ② scroll-view ③ swiper 和 swiper-item 二.常用的基础内容组件 ① text ② rich-text 三.其它常用组件 ...
微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
微信小程序上传组件（可同时长传图片+视频）
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...

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

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