介绍

z-paging

一个uni-app (opens new window)分页组件。
全平台兼容，支持自定义下拉刷新、上拉加载更多，支持虚拟列表，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等。

功能&特点

• 【配置简单】仅需两步（绑定网络请求方法、绑定分页结果数组）轻松完成完整下拉刷新，上拉加载更多功能。
• 【低耦合，低侵入】分页自动管理。在page中无需处理任何分页相关逻辑，无需在data中定义任何分页相关变量，全由z-paging内部处理。
• 【超灵活，支持各种类型自定义】支持自定义下拉刷新，自定义上拉加载更多，自带自定义下拉刷新效果，及其他数十种自定义属性。
• 【功能丰富】支持国际化，支持自定义且自动管理空数据图，支持主题模式切换，支持本地分页，支持聊天分页模式，支持展示最后更新时间，支持吸顶效果，支持内部scroll-view滚动与页面滚动，支持一键滚动到顶部等诸多功能。
• 【全平台兼容】支持vue、nvue，vue2、vue3，支持h5、app及各家小程序。
• 【高性能】在app-vue、h5、微信小程序、QQ小程序上使用wxs+renderjs在视图层实现下拉刷新；支持虚拟列表，轻松渲染百万级数据！

关于自动引入组件

z-paging 支持easycom组件规范 (opens new window)，无需引用和注册组件即可直接使用，在正在运行的项目中导入z-paging可能会提示：Unknown custom element：<z-paging> - did you register the component corrently?...，此时需要重新运行项目即可。

平台兼容性

App	h5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
app-vue app-nvue	√	√	√	√	√	√

许可协议

• MIT协议

预览

---

自定义下拉刷新效果演示	滑动切换选项卡+吸顶演示	聊天记录模式演示

虚拟列表(流畅渲染1万+条)演示	下拉进入二楼演示	在弹窗内使用演示

性能与建议

	使用内置scroll-view滚动	使用页面滚动	使用nvue
说明	默认模式，z-paging需要有确定的高度，下拉刷新与上拉加载更多由z-paging内部处理，配置简单。	use-page-scroll设置为true时生效，使用页面滚动而非内置scroll-view滚动，无需固定z-paging的高度，但需要在页面滚动到底部时调用z-paging的doLoadMore()方法。 当使用页面的下拉刷新时，需要引入mixin(可全局引入)，具体可参见demo。	创建nvue页面并引入z-paging且运行在APP上生效，z-paging将使用nvue独有的<list>和<refresh>代替原有的scroll-view和自定义的下拉刷新，可大幅提升性能。
性能	一般(开启虚拟列表后为"优")	良好	优
优缺点	【优点】配置简单、耦合度低。普通的简单列表不会有明显卡顿。 【缺点】需要固定z-paging高度，超出页面部分渲染的资源无法自动回收，当列表item比较复杂或数据量过多时，可能会造成明显卡顿。 由2.2.5开始支持虚拟列表，性能大幅提升，可轻松渲染百万级数据！设置虚拟列表后性能高于页面滚动。	【优点】性能优于使用内置的scroll-view滚动，超出页面部分渲染的资源会自动回收，能适应绝大多数列表滚动的情况，即使列表item比较复杂，一般也不会感知到卡顿。 【缺点】配置略麻烦，耦合度较高。	【优点】原生渲染，极致性能，<list>组件在不可见部分的渲染资源回收有特殊的优化处理，<refresh>组件是app端独有的下拉刷新组件，性能远超普通vue页面中的自定义下拉刷新。 【缺点】仅App端支持，nvue页面写法不如vue页面方便，在z-paging中一些配置和方法在nvue中不支持，且nvue页面中支持的第三方组件也比vue页面少。

【总结】

• 如果项目列表item比较简单，分页数据量不是特别多，建议使用默认的「内置scroll-view滚动」。
• 如果项目列表item比较复杂，数据量多，且使用「内置scroll-view滚动」时卡顿明显，建议开启虚拟列表。
• 如果是App项目，且对性能和细节有较高要求，建议在nvue中使用z-paging。