376  
查询码:00000622
uni-app-模板列表封装【加载更多丶分页丶下拉刷新丶上拉加载丶横向滑动丶吸顶】
作者: 王路鑫 于 2021年07月07日 发布在分类 / 人防组 / 人防前端 下,并于 2021年07月07日 编辑




       组件示范在模板疏散通知,样式功能都可以根据需求修改,里面包含加载更多丶分页丶下拉刷新丶上拉加载丶横向滑动丶显示最后时间丶吸顶功能,方法介绍参考如下:内容过多只展示部分方法可以查看链接:http://z-paging.com/2263342#p_stylecolor007AFFfontweightboldp_70

z-paging文档


【uni-app自动分页器】超简单,低耦合!仅需两步轻松完成完整分页逻辑(下拉刷新、上拉加载更多),分页全自动处理。支持自定义加载更多的文字或整个view,自定义下拉刷新样式,自动管理空数据view,支持吸顶效果等。

【注意1】由V1.9.0起,fixed属性默认值为true,z-paging默认会铺满屏幕。老项目更新请注意,使用侧滑滚动切换选项卡或需要局部使用z-paging请设置:fixed="false"。如果您希望fixed属性默认为false,请参考下方的【全局配置】,将fixed默认值设置为false。

【注意2】由V1.8.4起,支持使用v-model绑定list,之前的:list.sync依然有效。在新的项目中建议使用v-model,因为v-model是双向绑定的,修改页面中的list将同步修改z-paging中的list。

支持全局配置(统一配置所有z-paging的所有属性,非必须)

注意:这里的全局配置不是全局引入组件,全局配置是指统一配置z-paging默认的属性值,z-paging遵循easycom组件规范,无需注册即可使用。

点击查看easycom组件规范

  • (推荐)【方案1】在路径@/uni_modules/z-paging下创建z-paging-config.js(与z-paging目录下的readme.md同级),z-paging-config.js中的内容如下所示。
module.exports = { //配置分页默认pageSize为15 'default-page-size': '15', //配置空数据图默认描述文字为:空空如也~~ 'empty-view-text': '空空如也~~', //... } 
  • 【方案二】在main.js中import zConfig from '@/uni_modules/z-paging/components/z-paging/js/z-paging-config'(此路径为使用uni_modules情况下使用,可依照具体情况进行修改),然后进行z-paging的全局配置:

    注意,如果调用过setConfig进行配置,后期又需要取消配置,则必须设置zConfig.setConfig(null)将配置置空,因为setConfig是将配置设置在缓存中,直接删除配置代码将导致原先缓存的配置无法清空。

zConfig.setConfig({ //配置分页默认pageSize为15 'default-page-size': '15', //配置空数据图默认描述文字为:空空如也~~ 'empty-view-text': '空空如也~~', //... }) 

【常规】配置

参数 说明 类型 默认值 可选值
default-page-no 自定义pageNo(第几页) Number|String 1 -
default-page-size 自定义pageSize(每页显示多少条) Number|String 10 -
fixed z-paging是否使用fixed布局,若使用fixed布局,则z-paging的父view无需固定高度,z-paging高度默认铺满屏幕,页面中的view请放在z-paging标签内,需要固定在顶部的view使用slot="top"包住。

(当使用内置scroll-view滚动时有效,nvue无效。若使用了fixed,请不要设置height:100%)

Boolean true false
safe-area-inset-bottom 是否开启底部安全区域适配

(nvue无效)

Boolean false true
use-page-scroll 使用页面滚动,默认为否,当设置为是时则使用页面的滚动而非此组件内部的scroll-view的滚动,使用页面滚动时z-paging无需设置确定的高度且对于长列表展示性能更高,但配置会略繁琐 Boolean false true
use-custom-refresher 是否使用自定义的下拉刷新,默认为是,即使用z-paging的下拉刷新。设置为false即代表使用uni scroll-view自带的下拉刷新,h5、App、微信小程序以外的平台不支持uni scroll-view自带的下拉刷新 Boolean true h5、App、微信小程序以外的平台设置为false时,无法使用下拉刷新
list.sync

(建议使用v-model代替)

绑定最终的列表渲染变量(页面data中声明的值),当列表数据改变时,所绑定的变量会跟着改变
Array - -
refresher-status.sync 绑定下拉刷新状态改变的变量(页面data中声明的值),当下拉刷新状态改变时,此变量会跟着改变 Number - -
chat-index.sync 绑定聊天记录模式下当前聊天记录第一条index的变量(页面data中声明的值),当聊天记录第一条index改变时,此变量会跟着改变 Number - -




 推荐知识

 历史版本

修改日期 修改人 备注
2021-07-07 18:47:17[当前版本] 王路鑫 创建版
知识分享平台 -V 4.8.7 -wcp