# 介绍

z-paging

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

# 功能&特点

  • 【配置简单】仅需两步(绑定网络请求方法、绑定分页结果数组)轻松完成完整下拉刷新,上拉加载更多功能。
  • 【低耦合,低侵入】分页自动管理。在page中无需处理任何分页相关逻辑,无需在data中定义任何分页相关变量,全由z-paging内部处理。
  • 【超灵活,支持各种类型自定义】支持自定义下拉刷新,自定义上拉加载更多,自带自定义下拉刷新效果,及其他数十种自定义属性。
  • 【功能丰富】支持国际化,支持自定义且自动管理空数据图,支持主题模式切换,支持本地分页,支持聊天分页模式,支持展示最后更新时间,支持吸顶效果,支持内部scroll-view滚动与页面滚动,支持一键滚动到顶部等诸多功能。
  • 【全平台兼容】支持nvue,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

# 许可协议

# 预览


自定义下拉刷新效果演示 滑动切换选项卡+吸顶演示
聊天记录模式演示 虚拟列表(流畅渲染1万+条)演示

# 性能与建议

使用内置scroll-view滚动 使用页面滚动 使用nvue
说明 默认模式,z-paging需要有确定的高度,下拉刷新与上拉加载更多由z-paging内部处理,配置简单。 use-page-scroll设置为true时生效,使用页面滚动而非内置scroll-view滚动,无需固定z-paging的高度,但需要在页面滚动到底部时调用z-pagingdoLoadMore()方法。
当使用页面的下拉刷新时,需要引入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