z-paging文档

# 基本数据&布局

# 基本数据&布局Props

# 属性配置：设置v-model数据源、控制初始pageNo&pageSize、设置页面滚动、设置fixed布局、设置底部安全区域适配、设置z-paging宽高&背景色、设置下拉刷新&加载更多主题色、设置z-paging内置布局单位(rpx|px)等

# reload方法相关Props

# 属性配置：设置mounted后是否自动触发queryList、设置reload时是否自动滚动到顶部、设置reload时是否立即自动清空原list、设置reload时是否自动显示下拉刷新view等

# Slots

# 插槽：自定义z-paging上下左右四个位置插槽

上下左右四个插槽位置草图

# Methods

# 方法：触发重新加载分页、触发触发分页加载结束、触发清除分页数据等

# 数据处理Events

# 事件：监听并处理下拉刷新或滚动到底部(@query)、监听分页渲染的数组改变

# 布局-交互Events

# 事件：监听并处理z-paging中内容高度改变、监听监听列表触摸方向改变

# 示例

# 关于z-paging布局模式

z-paging布局默认有固定布局、非固定布局和页面滚动三种👇🏻

设置 特点 图示
固定布局(默认) :fixed="true" 默认配置，z-paging为position: fixed并铺满整个页面，脱离页面文档流。z-paging标签外的view都会被它盖住或盖住它。建议：页面中所有元素写在z-paging标签内(包括自定义的导航栏或者自定义的tabbar)，如果需要固定在顶部的则放在slot="top"中，固定在底部的放在slot="bottom"，此时z-paging是局部滚动的。
适用场景：一般的页面列表分页
非固定布局 :fixed="false" 可选配置，z-paging不再是position: fixed；但z-paging依然是局部滚动，可以将z-paging标签想象成scroll-view，因此您必须给它(或给它的父view)确定的高度，因为局部滚动必须确定滚动的范围。
适用场景：在弹窗内部、swiper内部等需要局部滚动的场景
页面滚动 :use-page-scroll="true"(注意引入mixins，详见props中的说明) 可选配置，z-paging不再是局部滚动的，也就是z-paging内部相当于不再存在scroll-view，可以将z-paging想象成普通的view容器，列表内容会将其撑高，z-paging的高度由列表内容决定。
适用场景：下拉刷新需要从页面的某个view下方开始；或者一些需要使用到页面滚动默认行为的场景(例如页面滚动联动导航栏透明度改变)

# 关于页面滚动模式，为什么要引入mixins的解释

在页面滚动模式下，z-paging无法得知当前页面滚动的scrollTop和页面是否滚动到底部了，因此必须监听页面滚动相关事件并将其通知给z-paging；使得z-paging可以作出相应的响应。 mixins中核心代码&解释说明如下👇🏻

export default {
    // 当页面的系统下拉刷新事件被触发（绝大多数情况不用写，因为z-paging默认使用的是内部的下拉刷新）
	onPullDownRefresh() {
        // 调用z-paging的reload方法，刷新列表
		this.$refs.paging.reload().catch(() => {});
	},
    // 当页面滚动事件被触发
	onPageScroll(e) {
        // 更新z-paging内部的scrollTop
        // 这是必须的，因为z-paging在页面滚动模式中是通过scrollTop判断当前是否可以进行下拉刷新的。
        // 若scrollTop > 10时不允许下拉刷新，仅允许滚动；因此没有调用此方法会导致在任意位置都能下拉刷新
		this.$refs.paging.updatePageScrollTop(e.scrollTop);
        // 如果滚动到顶部，则触发聊天记录模式下的加载更多聊天记录（仅聊天记录模式需要）
		e.scrollTop < 10 && this.$refs.paging.doChatRecordLoadMore();
	},
    // 当页面滚动到底部事件被触发
	onReachBottom() {
        // 通知z-paging滚动到底部了，z-paging会进行相应的处理，例如加载更多数据
		this.$refs.paging.pageReachBottom();
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

由上可知，实际上mixins引入不是必须的，mixins或hooks本身只是为了减少重复的代码，您完全可以根据mixins中的内容自行处理页面滚动的情况；
当理解了以上说明以后，您也就可以游刃有余地处理在子组件内使用z-paging如何引入mixins的问题了。只需要遵循一个原则：将页面滚动相关的事件通知给z-paging即可。

# 本地分页

通常用于服务端一次性返回大量数据的情况，若一次性渲染可能会导致渲染时间较长，此时适合使用本地分页，将大量数据一次性给z-paging，z-paging将在本地自动进行分页处理

# Props

# 属性配置：设置本地分页时上拉加载更多延迟时间

# Methods

# 方法：设置本地分页，将需要本地分页的总数据传给z-paging

# 示例

# 数据缓存

用户首次进入页面先自动加载缓存中的列表数据，再从服务端获取最新数据刷新列表与缓存。
ps:如果您希望tabs切换各个z-paging数据独立，请下载示例项目并参照swiper-demo的写法

# Props

# 属性配置：设置是否开启缓存、设置缓存模式

# Methods

# 方法：手动更新列表缓存数据

# 示例

# z-index

# Props

# 属性配置：设置不同容器的z-index

← 下拉刷新模块 →