uniapp小程序分页

前言

uniapp中的z-paging实现分页功能，无需引入和下载直接可以用，小程序用得比较多的插件

一、z-paging是什么？

是一个常用的实现分页的插件

二、使用步骤

1.html代码

   <z-paging ref="paging" v-model="list" :fixed="true" @query="getList" :hide-empty-view="false" >
		<view class="list" v-for="item in list" :key="item.id" >
			<view class="item">名称: <text class="value">{{item.name}}</text></view>
			<view class="item">编码: <text class="value">{{item.code}}</text></view>
			<view class="item">地址: <text class="value">{{item.addr?item.addr:'地址没有配置'}}</text></view>
		</view>
	</z-paging>

2.js代码

       data() {
			return {
				list: []
			}
		},
		methods: {
			getList(pageNo, pageSize) {
				fetchListApi({current:pageNo,size:pageSize}).then(res =>{
					if(res.code === 0) {
						this.list = res.data.records
						this.$refs.paging.complete(this.list);
					}else{
						this.$refs.paging.complete(false);
					}
				})
			}
		},

3.CSS代码

    .wraper{
		padding: 20rpx;
		.list{
			border: 1rpx solid #eee;
			margin: 20rpx auto;
			padding: 20rpx;
			position: relative;
			.item{
				padding-bottom: 10rpx;
				font-size: 28rpx;
				line-height: 1.6;
				.value{
					margin-left: 20rpx;
				}
			}
			.button{
				position: absolute;
				right: 20rpx;
				display: flex;
				top: 10rpx;
				.img{
					width: 48rpx;
					height: 48rpx;
					background: url('/static/click.png');
					background-size: 100%;
				}
				.text{
					font-size: 28rpx;
					line-height: 1.8;
					color: #1296db;
				}
			}
		}
		.pager{
			display: flex;
			margin-top: 20rpx;
			.item{
				flex: 1;
				box-sizing: border-box;
				padding: 20rpx 50rpx;
			}
		}
	}

总结

如果数据为空它自己会自动给你显示一个比较优雅的暂无数据图标，注意要把hide-empty-view设置为false，否则页面显示空白影响体验感