uniapp---- 分页 功能

一、实现步骤：

1.首先我们得在页面引入这个分页器的组件：

	<!-- 分页器 -->
<page-pagination :total="page.total" 
:currentPage="page.currentPage"  
:pageSize="page.pageSize" 
:forceEllipses="true" @change="change">
</page-pagination>

2.在data 中定义这些数据

data() {
	return {
	flag:0,
current_page:1,//当前页
page:{
     total:0, //总数据
  pageSize: 10, //默认每次请求10 条
  currentPage: 1  ////当前选中的页数
},
messagekind:[] ,//navBar 数据
info_img:'',
arrmessage:[],//每个nav-bar 对应的选项
}		
},		

补充：

一进入首页就默认显示第一页的数据

async index(){
// 进入资讯接口
let res=await this.$myRequest({
url:'intomessagearea',
data:{
kind:1,
phone:this.phone
}
})
this.arrmessage=res.data.arrmessage.data
this.messagekind=res.data.messagekind
this.info_img=res.data.messagekind[0].info_img //一进入页面显示的对应图片
this.flag=res.data.messagekind[0].id //一进入页面就显示的样式
this.page.total=res.data.arrmessage.total //请求的总数据
this.page.pageSize=res.data.arrmessage.per_page //每页显示的条数
this.page.currentPage=res.data.arrmessage.current_page //当前选中页
},

3.组件内置事件来处理这些数据

	 async change(currentPage, type){
		this.page.currentPage=currentPage //当前选中页
		this.current_page=currentPage //当前页
		let res=await this.$myRequest({
		url:'intomessagearea', //这个接口还是一进入页面的接口
		data:{
		kind:this.flag, //传入对应类型的id
		page:this.current_page //传入当前选中页的数据
		}
		})
		this.arrmessage=res.data.arrmessage.data  //请求成功之后刷新数据
		}

4.效果图：样式自己调整，可以使用固定定位实现。