uni-app使用官方pagination实现分页效果

写uni-app的时候遇到数据量大 需要分页的地方 上百度查看了很多文档 有懒加载 上拉加载 下拉刷新 觉得太麻烦了 没必要做的复杂 意外上官方插件库看见了官方写的pagination组件 真的很奈斯 简单好用

1. 先下载官方插件

官方插件链接 可以选择自己导进去或者easycom引入
如果是自己导入的把文件放在 components 里面

2. 页面模板引用

	<uni-pagination 
		:total="total" 
		:current="current"  
		@change="handlePage">
	</uni-pagination>

3. 页面js引用

import uniPagination from "@/components/uni-pagination/uni-pagination.vue"
export default {
	components: { uniPagination },
	data() {
		return {
			// 分页参数
			total: '',
			current: 1
		}
	},
	methods:{
		//  列表
		getList() {
			this.$http({
				url: '', // 路径
				method: "POST",
				data: {
					PageIndex: this.current,
					PageSize: 10,
				},
				success: function(res) {
					if (res.data.Code === 1000) {
						this.tableData = res..data; // 页面上需要渲染的list
						this.total = res.total  // 获取到接口返回的总数
					} else {
						_this.$tips(res.data.Message);
					}
				}
			})
		},
		
		// 分页点击事件
		handlePage(params) {
			// console.log(params)  可以打印看看params
			this.current = params.current;
			this.getList() // 点击的时候去请求查询列表
		}
	}
	
}

4. 实现效果