如何下载demo
- 以下基本使用均为选项式api写法,若需要查询组合式api(setup)写法,请查阅demo
- 👉🏻(demo)示例项目下载
# 基本使用
- ①在
<template>
中使用@query绑定js中分页请求的方法(z-paging
会将计算好的pageNo和pageSize两个参数传递到此方法中),然后通过v-model
绑定列表for循环的list。 - ②在请求结果回调中,通过调用
z-paging
的complete()
方法,将请求返回的数组传递给z-paging
处理,如:this.$refs.paging.complete(服务器返回的数组);
;若请求失败,调用:this.$refs.paging.complete(false);
即可。 - 当tab切换或搜索时,可以通过
this.$refs.paging.reload()
刷新整个列表。 - 在nvue中,z-paging中插入的列表item(z-paging的直接子view)必须是cell,必须使用cell包住,因为在nvue中,z-paging使用的是nvue的list组件,具体请查阅demo中的
common-demo-n.vue
示例。
# 仅使用下拉刷新示例 1.6.6
<template>
<!-- refresher-only会关闭mounted自动请求数据、关闭滚动到底部加载更多,强制隐藏空数据图。如果同时需要下拉刷新和滚动到底部加载更多,只需设置:auto="false"即可,请勿设置refresher-only -->
<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
<!-- 页面内容 -->
</z-paging>
</template>
<script>
export default {
methods: {
// 下拉刷新被触发
onRefresh() {
// 告知z-paging下拉刷新结束,这样才可以开始下一次的下拉刷新
setTimeout(() => {
// 1.5秒之后停止刷新动画
this.$refs.paging.complete();
}, 1500)
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 下拉进入二楼示例 2.7.7
<template>
<!-- 下楼进入二楼建议在pages.json中隐藏系统导航栏,使用自定义导航栏,避免二楼被系统导航栏盖住 -->
<z-paging ref="paging" v-model="dataList" refresher-f2-enabled @query="queryList">
<!-- 自定义松手显示二楼view(非必须,可根据具体需求定制) -->
<template #refresherF2>
<view class="refresher-f2-view">
<text class="refresher-f2-view-text">松手可以进入二楼哦 (*╹▽╹*)</text>
</view>
</template>
<!-- 自定义需要插入二楼的view,建议将插入二楼的view设置高度100%以铺满容器高度 -->
<template #f2>
<custom-f2 @closeF2="onCloseF2"/>
</template>
<!-- 页面内容 -->
</z-paging>
</template>
<script>
export default {
methods: {
// 点击了关闭二楼
onCloseF2() {
this.$refs.paging.closeF2();
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 延迟加载列表示例
# 自行控制z-paging列表加载时机,例如先获取tabs数据然后再触发列表加载
<template>
<!-- 通过:auto="false"禁止默认的自动加载列表行为 -->
<z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList">
<!-- 页面内容 -->
</z-paging>
</template>
<script>
export default {
onLoad() {
// 在页面加载时请求tabs数据
this.$request.queryTabs().then(tabs => {
this.tabList = tabs;
// 获取tabs数据后触发加载z-paging列表
this.$refs.paging.reload();
})
},
// 其他部分与普通模式一致,略
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 设置自定义empty组件示例
# 设置自定义empty组件,非必须。空数据时会自动展示空数据组件,不需要自己处理
# 自定义加载更多各个状态的描述文字示例
# 以修改【没有更多了】状态描述文字为例(将默认的"没有更多了"修改为"我也是有底线的!")
<z-paging ref="paging" v-model="dataList" loading-more-no-more-text="我也是有底线的!" @query="queryList">
<!-- 设置自己的emptyView组件,非必须。空数据时会自动展示空数据组件,不需要自己处理 -->
<view class="item" v-for="(item,index) in dataList" :key="index">
<view class="item-title">{{item.title}}</view>
</view>
</z-paging>
1
2
3
4
5
6
2
3
4
5
6
# 自定义下拉刷新view示例
# use-custom-refresher
需要设置为true(默认为true),此时将不会使用uni自带的下拉刷新,转为使用z-paging自定义的下拉刷新,通过slot可以插入开发者自定义的下拉刷新view。
# 自定义加载更多各个状态的描述view示例
# 以修改【没有更多了】状态描述view为例
# 使用页面滚动示例
# 虚拟列表示例 2.2.5
不同写法在不同平台兼容性有差异,详见虚拟列表&内置列表模块
# 使用fetch的极简写法示例 2.7.8
<!-- 使用fetch的极简写法示例 -->
<template>
<!-- 通过:fetch直接传入列表请求函数即可,默认会调用对应请求参数并且给它传{pageNo, pageSize}两个参数 -->
<!-- :fetch的请求函数附加参数可通过:fetch-params传入 -->
<z-paging ref="paging" v-model="dataList" :fetch="queryList" :fetch-params="{ type: tabIndex + 1 }">
<view class="item" v-for="(item,index) in dataList">
<view class="item-title">{{item.title}}</view>
</view>
</z-paging>
</template>
<script>
import { queryList } from '../../http/request.js'
export default {
data() {
return {
queryList,
dataList: [],
}
},
methods: {
// 也支持自行实现fetch函数,例如在props中添加 :fetch="fetchFunc",然后实现:
/*
async fetchFunc(params) {
const res = await this.$request.queryList({ pageNo: params.pageNo, pageSize: params.pageSize, type: this.tabIndex + 1 });
return res.data.list;
}
*/
// 在main.js中可以对全局:fetch的请求参数和响应进行拦截和统一处理,默认请求参数为{ pageNo, pageSize },将响应结果直接当作分页数组。如非默认情况,请使用下方示例处理
/*
// 处理z-paging fetch写法拦截,handleFetchParams用于拦截请求入参,返回最终入参对象。handleFetchResult用于拦截请求结果,自行处理请求结束后操作,务必调用complete或complete相关方法
// 支持链式调用
ZPInterceptor.handleFetchParams((parmas, extraParams) => {
return {pageNo: parmas.pageNo, pageSize: parmas.pageSize, ...extraParams};
}).handleFetchResult((fetchResult, paging) => {
fetchResult.then(res => {
paging.complete(res.data.list);
}).catch(err => {
paging.complete(false);
})
})
*/
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
- 针对fetch的全局拦截写法请参照:拦截器
# i18n示例
- 请参照demo:
i18n-demo.vue
# 本地分页示例
<!-- 本地分页示例 -->
<template>
<z-paging ref="paging" v-model="dataList" @query="queryList">
<view class="item" v-for="(item,index) in dataList">
<view class="item-title">{{item.title}}</view>
</view>
</z-paging>
</template>
<script>
export default {
data() {
return {
dataList: []
};
},
methods: {
queryList() {
// 这里的请求只是演示,请替换成自己的项目的网络请求
this.$request.queryAllList().then(res => {
// 设置本地分页并将服务端返回的完整列表数据传给z-paging,滚动到底部会在本地进行分页数据拼接,不会触发分页请求。下拉刷新或reload时会重新触发queryList
this.$refs.paging.setLocalPaging(res.data.list);
})
}
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 数据缓存示例
<!-- 设置数据缓存示例 -->
<template>
<z-paging ref="paging" v-model="dataList" use-cache cache-key="goodsList" @query="queryList">
<view class="item" v-for="(item,index) in dataList">
<view class="item-title">{{item.title}}</view>
</view>
</z-paging>
</template>
<script>
// 与普通模式一致,略
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12