gui-pager 组件功能

gui-pager 是一个分页页码组件，根据您的数据设置自动创建页码，给您的数据列表开发带来极大的便利 ~

组件属性

total:{ type : Number, default : 10} // 数据总数
everpagenumber:{ type : Number, default : 10}// 每页展示数据条目数
currentPage:{ type : Number, default : 1} // 当前页码
perPages : {  type : Number, default : 5 } // 过度页展示数量 应该为一个奇数 如 5 7 9

组件事件 @pageChange

当用户点击页码切换页码时会激活 @pageChange 事件，并携带具体的页码数据, 详见下面的演示代码；

注意事项

请使用 v-if 等待api数据请求完毕后再创建组件，详见演示代码；

演示代码

此部分代码在 pages/notice/notice.vue 内

<template>
	<view>
		<gui-page :currents="[1,0]">
			<div slot="gui-body">
				<div class="gui-body-title">公告管理 <text @tap="addNotice">+添加公告</text></div>
				<div class="gui-body">
					<div class="gui-tips">为了演示分页效果我们每页只展示{{everpagenumber}}条数据，实际开发请根据项目需求自行设置 (:</div>
					<table class="gui-table" cellpadding="0" cellspacing="0" style="margin-top:20px;">
						<thead>
							<tr>
								<td>公告内容</td>
								<td>发布时间</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item, index) in datas" :key="index">
								<td>{{item.content}}</td>
								<td>{{item.date}}</td>
								<td>
									<text class="gui-do-btns gui-icons icon-edit" @tap="gotoEdit(item._id);">编辑</text>
									<text class="gui-do-btns gui-icons icon-remove" @tap="deleteData(item._id)">删除</text>
								</td>
							</tr>
						</tbody>
					</table>
					<div>
						<gui-pager v-if="total > 1" :total="total" :everpagenumber="everpagenumber" :currentPage="currentPage" @pageChange="pageChange"></gui-pager>
					</div>
				</div>
			</div>
		</gui-page>
	</view>
</template>
<script>
export default {
	data() {
		return {
			currentPage : 1,
			total : 0,
			everpagenumber : 2,
			datas:[]
		}
	},
	onLoad:function(){
		this.getData();
	},
	methods:{
		// 跳转到添加页
		addNotice : function () {
			uni.redirectTo({
				url:"./add"
			})
		},
		// 页码切换事件
		pageChange:function (e) {
			this.currentPage = e;
			this.getData();
		},
		// 数据列表加载
		getData : function () {
			uni.showLoading({});
			uniCloud.callFunction({
				name:"getNoticeList",
				data:{page:this.currentPage, everpagenumber : this.everpagenumber}
			}).then((res)=>{
				uni.hideLoading();
				console.log(res);
				this.total = res.result[0].total;
				this.datas = res.result[1].data;
			});
		},
		// 编辑数据
		gotoEdit : function(id){
			console.log(id);
			uni.navigateTo({
				url:'./editNotice?id='+id
			});
		},
		// 删除数据
		deleteData : function(id){
			uni.showModal({
				title:"确认要删除数据吗?",
				success: (e) => {
					if (!e.confirm){return ;}
					uni.showLoading({});
					uniCloud.callFunction({
						name:"deleteNotice",
						data:{id:id}
					}).then((res)=>{
						uni.hideLoading();
						if(res.result.status == 'ok'){
							uni.showToast({
								title:"数据已经删除"
							});
							this.getData();
						}
					});
				}
			})
		}
	}
}
</script>
<style>
</style>