基本数据&布局 | 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即可。