# 数据&布局配置

参数 说明 类型 默认值 可选值
v-model 1.8.4 绑定最终的列表渲染变量(页面data中声明的值),当列表数据改变时,所绑定的变量会跟着改变

(当调用z-paging的complete方法之后,v-model绑定的数组不会立即改变,可延时100毫秒获取,或使用@listChange监听分页数组改变)

Array - -
default-page-no 自定义初始的pageNo(从第几页开始) Number|String 1 -
default-page-size 自定义pageSize(每页显示多少条)

(必须和后端的pageSize一致,例如后端分页的pageSize为15,此属性必须改为15)

Number|String 10 -
fixed 1.5.6 z-paging是否使用fixed布局,若使用fixed布局,则z-paging的父view无需固定高度,z-paging高度默认铺满屏幕,页面中的view请放在z-paging标签内,需要固定在顶部的view使用slot="top"包住,需要固定在底部的view使用slot="bottom"包住。

(若不需要z-paging铺满全屏,例如希望在弹窗内使用z-paging,请设置:fixed="false",同时必须指定z-paging的高度,否则列表无法显示。
若希望z-paging随着内容自动撑高,需设置:use-page-scroll="true",无需修改fixed的配置,也无需指定z-paging高度)

Boolean true false
safe-area-inset-bottom 1.6.1 是否开启底部安全区域适配 Boolean false true
use-safe-area-placeholder 2.2.7 开启底部安全区域适配后,是否使用placeholder形式实现。为否时滚动区域会自动避开底部安全区域,也就是所有滚动内容都不会挡住底部安全区域,若设置为是,则滚动时滚动内容会挡住底部安全区域,但是当滚动到底部时才会避开底部安全区域

(safe-area-inset-bottom为true时有效)

(若设置了slot="bottom",请勿将此属性设置为true,否则将导致底部安全区域失效)

Boolean false true
use-page-scroll 使用页面滚动,默认为否,当设置为是时则使用页面的滚动而非此组件内部的scroll-view的滚动,使用页面滚动时z-paging无需设置确定的高度且对于长列表展示性能更高,但配置会略繁琐

(特别注意:必须引入mixins,详情请点击这里,(在一些无法引入mixins的场景:如组合式api中,可通过模仿mixins中的代码来实现:在页面的onPageScroll(e)事件中调用this.$refs.paging.updatePageScrollTop(e.scrollTop);,在页面的onReachBottom事件中调用this.$refs.paging.pageReachBottom();)。
在组件中使用z-paging不建议开启页面滚动,因为需要页面将对应生命周期转发到组件内,步骤很繁琐,具体可参考demopage-default-by-comp-demo.vue)

(nvue中不建议使用页面滚动,nvue中默认使用list组件,性能远高于使用页面滚动。在nvue中使用页面滚动无法插入cell,且仅能使用页面的下拉刷新)

Boolean false true
auto-full-height 2.0.6 使用页面滚动时,是否在不满屏时自动填充满屏幕 Boolean true false
default-theme-style loading(下拉刷新、上拉加载更多)的主题样式,支持black,white String black white
paging-style 设置z-paging的style,部分平台(如微信小程序)无法直接修改组件的style,可使用此属性代替

(在使用fixed布局时,若要设置列表背景色,请设置page的背景色或使用:paging-style="{'background-color':'red'}"方式,因为此时z-paging的父view是没有高度的,给它们设置背景色无效)

Object - -
height 2.0.6 z-paging的高度,优先级低于paging-style中设置的height,传字符串,如100px、100rpx、100% String - -
width 2.0.6 z-paging的宽度,优先级低于paging-style中设置的width,传字符串,如100px、100rpx、100% String - -
max-width 2.7.6 z-paging的最大宽度,优先级低于paging-style中设置的max-width;传字符串,如100px、100rpx、100%。默认为空,也就是铺满窗口宽度,若设置了特定值则会自动添加margin: 0 auto String - -
bg-color 2.0.6 z-paging的背景色(为css中的background,因此也可以设置渐变,背景图片等),优先级低于paging-style中设置的background-color。传字符串,如"#ffffff" String - -
watch-touch-direction-change 2.3.0 是否监听列表触摸方向改变 Boolean false true
delay 1.9.6 调用complete后延迟处理的时间,单位为毫秒,优先级高于min-delay Number|String 0 -
min-delay 2.0.9 触发@query后最小延迟处理的时间,单位为毫秒,优先级低于delay(假设设置为300毫秒,若分页请求时间小于300毫秒,则在调用complete后延迟[300毫秒-请求时长];若请求时长大于300毫秒,则不延迟) Number|String 0
(当show-refresher-when-reload为true或reload(true)时,其最小值为400)
-
call-network-reject 2.6.1 请求失败是否触发reject,若设置为否,则this.$refs.paging.reload().catch(() => {})this.$refs.paging.complete().catch(() => {})等数据处理类型的catch在请求失败时不会触发,且未捕获请求失败catch时异常不会在控制台抛出 Boolean true false
unit 2.6.7 z-paging中默认布局的单位 String rpx px
concat 1.8.8 自动拼接complete中传过来的数组(使用聊天记录模式时无效)

(若设置为false,则complete中传过来的数组会直接覆盖list)

Boolean true false
data-key 1.6.4 为保证数据一致,设置当前tab切换时的标识key,并在complete中传递相同key,若二者不一致,则complete将不会生效

(关于数据一致性,请查看demo中consistency-demo.vue文件)

Number|Object - -
autowire-list-name 1.8.5 【极简写法】自动注入的list名,可自动修改父view(包含ref="paging")中对应name的list值

z-paging标签必须设置ref="paging"

String "" -
autowire-query-name 1.8.5 【极简写法】自动注入的query名,可自动调用父view(包含ref="paging")中的query方法

z-paging标签必须设置ref="paging"

String "" -
fetch 2.7.8 获取分页数据Function,功能与@query类似。若设置了fetch则@query将不再触发 Function null -
fetch-params 2.7.8 fetch的附加参数,fetch配置后有效 Object null -
list.sync

(建议使用v-model代替)

绑定最终的列表渲染变量(页面data中声明的值),当列表数据改变时,所绑定的变量会跟着改变
Array - -
refresher-status.sync 绑定下拉刷新状态改变的变量(页面data中声明的值),当下拉刷新状态改变时,此变量会跟着改变(0-默认状态 1.松手立即刷新 2.刷新中 3.刷新成功) Number - -
chat-index.sync 绑定聊天记录模式下当前聊天记录第一条index的变量(页面data中声明的值),当聊天记录第一条index改变时,此变量会跟着改变 Number - -
virtualList.sync 2.2.7 虚拟列表当前渲染的数组改变时触发,在虚拟列表中只会渲染可见区域内+预加载页面的数据。当列表数据改变时,所绑定的变量会跟着改变 Array - -