完整的unapp分页

<template>
	<view class="">
		<view class="tabSelect">
			<!-- 左边标签栏 -->
			<view class="leftCategory">
				<!-- 横向滑动 -->
				<scroll-view scroll-x="true" style="width: 100%; ">
					<view class="tab">
						<view class="tabItem" @click="tabCli(item,index)" :class="activeIndex==index?'activeCss':''"
							v-for="(item,index)  in  serverCategoryList" :key="index">{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 右边搜索 -->
			<view class="rightSearch">
				<view class="search" @click="searchCli">
					<image class="searchImg" src="../../../static/images/search_my.png" mode="widthFix"></image>
				</view>
			</view>

		</view>
		 <view class="dataNull" v-if="serverList.length==0">
			 <u-empty   mode="data">
			 </u-empty>
		 </view>
		<!-- 列表部分 start -->
		<view class="serverList">
			<view @click="shopingItem(item)" class="serverItem" v-for="(item,index) in serverList" :key="index">
				<!-- 引入Layout布局 -->
				<u-row customStyle="margin-bottom: 10px">
					<!-- 图片部分 -->
					<u-col span="3">
						<view class="sevrviceImg">
							<image @click.stop="previewImageCli(item.service_img)"
								:src="item.service_img ||'../../../static/inviteFriends/kongImg.png'"></image>
						</view>
					</u-col>
					<!-- 内容部分 -->
					<u-col span="6">
						<view class="content">
							<view class="title">{{item.name}}</view>
							<view class="time_money">
								<view class="time">{{item.duration}}分钟</view>
								<view class="money">￥{{item.price}}</view>
							</view>
						</view>
					</u-col>
					<!-- 按钮 -->
					<u-col span="3">
						<view class="btn_person">
							<view class="btn" @click.stop="appointmentCli(item.id)">
								预约
							</view>
							<view class="person">{{item.server_total}}人预约过</view>
						</view>
					</u-col>
				</u-row>
				<!-- 线条 -->
				<view class="uline">
					<u-line></u-line>
				</view>
			</view>
		</view>
		<!--  列表部分 end  -->
		<!-- 加载动态 -->
		<view v-if="serverList.length>=data.limit">
			<uni-load-more :status="status" />
		</view>
		
		<!-- 预约方式弹窗 -->
		<uni-popup ref="appointmentPopup"   type="center">
		 <!-- 选择方式组件 -->
		 <selectMode @cancle="selectModeClose" 
					 @appointment_store="appointment_store"
					 @appointment_door="appointment_door"></selectMode>
					 
		</uni-popup>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				//加载动态
				status: 'more',
				//默认选中的标签为第一项
				activeIndex: 0, 
				//标签列表
				serverCategoryList: [{
					name: "全部"
				}],
				//传入的参数
				data: {
					name: "",
					category_id: 0,
					page: 1,
					limit: 10
				},
				//服务id 
				serverId:0,
				//服务列表
				serverList: []

			};
		},
		onLoad() { 
			 this.$forceUpdate();
			 // 调用服务列表
			 this.getServerList(this.data);
			 //调用服务分类
			 this.getServerCategory();
			 
		},
		//挂载之前把数据传入
		beforeMount() {
			  
		},
		//下拉刷新
		onPullDownRefresh() {
			this.data.page=1;
			let  that=this;
			setTimeout(function(){
				that.getServerList(that.data);
				wx.stopPullDownRefresh();
			},200)
		},
		// 上拉加载
		onReachBottom() {
		  	this.data.page++;
			let  that=this;
			//加载中
			that.status="loading";
			setTimeout(function(){
				that.getServerList(that.data);
			},200)
		},
		methods: {
			appointmentCli(id){
				//打开预约弹窗
				this.$refs.appointmentPopup.open();
				this.serverId=id;
			},
			//预约上门
			appointment_door(){ 
				 //跳转关闭弹窗
				  this.selectModeClose();
				setTimeout(()=>{
					uni.navigateTo({
						url:"../appointment_to_door/appointment_to_door?id="+this.serverId
					}) 
				},200)
			},
			//预约到店
			appointment_store(){
				//跳转关闭弹窗
				 this.selectModeClose();
				setTimeout(()=>{
					uni.navigateTo({
						url:"../appointment_to_store/appointment_to_store?id="+this.serverId
					}) 
				},200)
			},
			//关闭窗口
			selectModeClose(){
				//关闭预约弹窗
				this.$refs.appointmentPopup.close();
			},
			//预览图片
			previewImageCli(img) {
				this.$helpApi.previewImage(img);
			},
			//得到服务分类
			getServerCategory() {
				let that = this;
				getApp().globalData.sendRequest({
					url: "/Xdd/getServerCategory",
					type: "post",
					success: res => {
						console.log(res, "服务分类");
						if (res.status == 1) {
							//数组组合
							that.serverCategoryList = that.serverCategoryList.concat(res.data);
						}
					}
				})
			},
			// 得到服务列表
			getServerList(data) {
				let that = this;
				getApp().globalData.sendRequest({
					url: "/Xdd/getServerList",
					data: data,
					type: "post",
					success: res => {
						console.log(res, "服务列表");
						//初始加载更多
						that.status="more";
						if (res.status == 1) {
							const sumPage=Math.ceil(res.data.data.count/data.limit);
							console.log(Math.ceil(res.data.data.count/data.limit),"获得总页数");
							 
							 if(data.page==1){
								 that.serverList = res.data.data.list;
							 }else  if(data.page<=sumPage){
								 that.serverList = that.serverList.concat(res.data.data.list);
							 }else{
								 //页数停止加1
								 that.data.page=sumPage;
								 //修改状态没有更多了
								 that.status="noMore";
							 }
							 
						}
					}
				})
			},
			//标签的点击事件
			tabCli(item, index) {
				this.activeIndex = index;
				this.data.page=1;
				this.data.category_id = item.id;
				this.getServerList(this.data);
			},
			//搜索商品
			searchCli() {
				uni.navigateTo({
					url: "../searchShoping/searchShoping"
				})
			},
			//查看商品详情
			shopingItem(item) {
				
				uni.navigateTo({
					url: "../shopingDetails/shopingDetails?id="+item.id
				})
			}
		}
	}
</script>
<style lang="scss">
	@import "./service.scss";
	
</style>