如何下载demo

① 在插件市场 (opens new window)中访问z-paging。
② 点击【使用HbuilderX导入示例项目】或【下载示例项目ZIP】。

提示

slot的写法在vue2vue3中写法不同(其他一致),以下示例为vue2写法,若需要查看vue3中的写法,请点击这里

# 基本使用

  • ①在<template> 中使用@query绑定js中分页请求的方法(z-paging会将计算好的pageNo和pageSize两个参数传递到此方法中),然后通过v-model绑定列表for循环的list。
  • ②在请求结果回调中,通过调用z-pagingcomplete()方法,将请求返回的数组传递给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示例。
<template>
    <view class="content">
        <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>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataList: []
            };
        },
        methods: {
            queryList(pageNo, pageSize) {
              	//这里的pageNo和pageSize会自动计算好,直接传给服务器即可
              	//这里的请求只是演示,请替换成自己的项目的网络请求,并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
                this.$request.queryList({ pageNo,pageSize }).then(res => {
                	//请勿在网络请求回调中给dataList赋值!!只需要调用complete就可以了
                	this.$refs.paging.complete(res.data.list);
                }).catch(res => {
                	//如果请求失败写this.$refs.paging.complete(false),会自动展示错误页面
                	//注意,每次都需要在catch中写这句话很麻烦,z-paging提供了方案可以全局统一处理
                	//在底层的网络请求抛出异常时,写uni.$emit('z-paging-error-emit');即可
                	this.$refs.paging.complete(false);
                })
            }
        },
    };
</script>

<style scoped>
    
</style>
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

# 设置自定义emptyView组件示例

  • 设置自定义emptyView组件,非必须。空数据时会自动展示空数据组件,不需要自己处理
<z-paging ref="paging" v-model="dataList" @query="queryList">
    <!-- 设置自己的emptyView组件,非必须。空数据时会自动展示空数据组件,不需要自己处理 -->
    <empty-view slot="empty"></empty-view>
    <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
7

# 自定义加载更多各个状态的描述文字示例

  • 以修改【没有更多了】状态描述文字为例(将默认的"没有更多了"修改为"我也是有底线的!")
<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

# 自定义下拉刷新view示例

  • use-custom-refresher需要设置为true(默认为true),此时将不会使用uni自带的下拉刷新,转为使用z-paging自定义的下拉刷新,通过slot可以插入开发者自定义的下拉刷新view。
<z-paging ref="paging" v-model="dataList" @query="queryList">
    <!-- 自定义下拉刷新view -->
    <!-- 注意注意注意!!QQ小程序或字节跳动小程序中自定义下拉刷新不支持slot-scope,将导致custom-refresher无法显示 -->
    <!-- 如果是QQ小程序或字节跳动小程序,请参照demo中的sticky-demo.vue中的写法,此处使用slot-scope是为了减少data中无关变量声明,降低依赖 -->
    <custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus"></custom-refresher>
    <!-- list数据,建议像下方这样在item外层套一个view,而非直接for循环item,因为slot插入有数量限制 -->
	<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
7
8
9
10

# 自定义加载更多各个状态的描述view示例

  • 以修改【没有更多了】状态描述view为例
<z-paging ref="paging" v-model="dataList" @query="queryList">
    <view class="item" v-for="(item,index) in dataList" :key="index">
        <view class="item-title">{{item.title}}</view>
    </view>
    <view style="background-color: red" slot="loadingMoreNoMore">这是完全自定义的没有更多数据view</view>
</z-paging>
1
2
3
4
5
6

# 使用页面滚动示例

<!-- 使用页面滚动示例(无需设置z-paging的高度) -->
<template>
	<view class="content">
		<!-- 此时使用了页面的滚动,z-paging不需要有确定的高度,use-page-scroll需要设置为true -->
		<!-- 注意注意!!这里的ref必须设置且必须等于"paging",否则mixin方法无效 -->
		<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
			<!-- 如果希望其他view跟着页面滚动,可以放在z-paging标签内 -->
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<view class="item-title">{{item.title}}</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	//使用页面滚动时引入此mixin,用于监听和处理onPullDownRefresh等页面生命周期方法(如果全局引入了,就不要这一步,全局引入示例见main.js)
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		//注意这一步不要漏掉,必须注册mixins(如果全局引入了,就不要这一步,全局引入示例见main.js)
		mixins: [ZPMixin],
		data() {
			//参见demo
		},
		methods: {
			//参见demo
		}
	}
</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

# 虚拟列表示例

<!-- 使用页面滚动示例(无需设置z-paging的高度) -->
<template>
	<view class="content">
		<!-- 如果页面中的cell高度是固定不变的,则不需要设置cell-height-mode,如果页面中高度是动态改变的,则设置cell-height-mode="dynamic" -->
		<z-paging ref="paging" use-virtual-list @query="queryList">
			<!-- 通过slot="cell"插入列表for循环的cell,slot-scope中提供当前for循环的item和index -->
			<!-- 因字节跳动小程序不支持slot-scope,因此不支持字节跳动小程序 -->
			<view slot="cell" slot-scope="{item,index}">
				<view class="item-title">{{item.title}}</view>
			</view>
			<!-- vue3中写法如下 -->
			<!-- 
			<template v-slot:cell="{item,index}">
				<view class="item-title">{{item.title}}</view>
			</template> 
			-->
		</z-paging>
	</view>
</template>

<script>
    export default {
        methods: {
            queryList(pageNo, pageSize) {
              	//这里的pageNo和pageSize会自动计算好,直接传给服务器即可
              	//这里的请求只是演示,请替换成自己的项目的网络请求,并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
                this.$request.queryList({ pageNo,pageSize }).then(res => {
                	//请勿在网络请求回调中给dataList赋值!!只需要调用complete就可以了
                	this.$refs.paging.complete(res.data.list);
                }).catch(res => {
                	//如果请求失败写this.$refs.paging.complete(false),会自动展示错误页面
                	//注意,每次都需要在catch中写这句话很麻烦,z-paging提供了方案可以全局统一处理
                	//在底层的网络请求抛出异常时,写uni.$emit('z-paging-error-emit');即可
                	this.$refs.paging.complete(false);
                })
            }
        },
    };
</script>

<style scoped>
    
</style>
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

# i18n示例

  • 请参照demo:i18n-demo.vue