uniapp z-paging简单使用——笔记

根据官网学习，记录一下笔记

介绍

一个uni-app (opens new window)分页组件。
全平台兼容，支持自定义下拉刷新、上拉加载更多，支持虚拟列表，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等。

插件下载：【z-paging下拉刷新、上拉加载】高性能，全平台兼容。支持虚拟列表，支持nvue、vue3 - DCloud 插件市场

 使用

<template>
	<view>
		   
		   <view class="list">
		   	
			<!-- z-paging是占满整个屏幕的，:fixed="false"取消占满屏幕，要设置宽高 -->
			<z-paging  v-model="list" ref="paging" @query="queryList">
				<!-- slot="top" 固定在列表顶部 -->
				<view class="" slot="top" style="display: flex;padding: 20rpx;">
					<input  type="text" name="" id="" placeholder="请输入要搜索的内容" style="flex: 1;border:solid #eeeeee;">
					<text @click="search()">搜索</text>
				</view>
				
				
				<view class="list-item" v-for="(item,index) in list">
					{{item}}
				</view>
				<!-- 自定义的没有更多数据view -->
				    <view slot="loadingMoreNoMore" style="background-color: red">这是自定义的没有更多数据view</view>
				<!-- slot="bottom" 固定在列表底部 -->
				<view class="" slot="bottom">
					固定在底部
				</view>
			</z-paging>
		   </view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
			
				list:[],
				
			}
		},
		onLoad() {

		},
		methods: {
			queryList(pageNo,pageSize){
				console.log(pageNo,pageSize)
				setTimeout(()=>{
					// 空数据 或者请求失败为false时，z-paging会自动展示空数据组件，不需要自己处理
					this.$refs.paging.complete([1,2,3,4,5,6,7,8,9,10])
				},500)
			},
			search(){
				this.$refs.paging.reload()
			}

		}
	}
</script>

<style lang="scss">
	
	.list-item{
		
		font-size: 35rpx;
		padding: 50rpx;
		text-align: center;
		border-bottom: solid #eeeeee;
	}
</style>