vue 实现分页和多页签功能

直接看源码

<template>
	<view class="wrap">
		<u-navbar  back-text="返回" title-color="#fff" back-icon-color="#ffffff" 
			:is-fixed="true" :is-back="true" 
			:back-text-style="{'color':'#fff'}"
			:background="background"  
			:custom-back="goback"
		>
			<view class="slot-wrap" v-if="true">
				<view class="search-wrap" v-if="true">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search v-model="selectParams.keyWord" @blur = "search()" placeholder="事项、跟进人、备注":show-action="false"  
					height="56" :action-style="{color: '#fff'}"></u-search>
				</view>
				<view class="navbar-right" v-if="true">
					<view class="message-box right-item">
						<u-icon name="plus" @click="addItem()" size="38">新增</u-icon>	
					</view>
				</view>	
			</view>		
		</u-navbar>
		<view class="u-tabs-box">
			<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item,index) in list" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="page-box">
						<view class="order" v-for="(item, index2) in  dataList[index]" :key="item.aguid" >
							<view class="item_top" @click="editItem(item)">
								<view class="item_title">
									<view class="item_id_laber color0 " v-if="item.status ==0">待办公</view>
									<view class="item_id_laber color1" v-if="item.status == 1">已办公</view>
									<view class="item_Text">
										<view>发起人：</view>
										<view style="color:#333;">{{item.fqry}}</view>
										
									</view>
									</view>
								<view class="item_Text">
									<view>开始时间：</view>
									<view>{{item.fqDateTime}}</view>
								</view>	
								<view class="item_Text">
									<view>事项：</view>
									<view style="color:#333;">{{item.itemContent}}</view>
								</view>
								<view class="item_Text">
									<view>跟进人：</view>
									<view>{{item.gjry}}</view>
								</view>
								<view class="item_Text">
									<view>要求时间：</view>
									<view>{{item.finishDateTime}}</view>
								</view>
								<view class="item_Text">
									<view>备注：</view>
									<view>{{item.remark}}</view>
								</view>
								
								<view class="item_Text">
									<view>完成人：</view>
									<view>{{item.wcry}}</view>
								</view>
								
							</view>
							
							<view class="item_bottom" >
								<view class="item_Text" >
									<view style="color:#ff557f;">完成时间：</view>
									<view style="color:#ff557f;">{{item.wcDateTime}}</view>	
									<u-icon style="color:#ff557f; margin-left: 50rpx;" size="38rpx"  name="checkmark-circle" @click="check(item)"></u-icon>
								</view>
							</view>
						</view>
						
					</view>
					<u-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></u-loadmore>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view>
				<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				list: [
					{
						name: '待办公'
					},
					{
						name: '已办公'
					},
					{
						name: '全部'
					}
				],
				current: 0,
				swiperCurrent:0,
				dx: 0,
				loadStatus: ['loadmore','loadmore','loadmore'],
				dataList:[[],[],[]],
				totalPages:0, 
				 keyWord:null,
				selectParams:{
					keyWord: '',
					status:0,
					pageSize:5,
					pageIndex:1	
				}
			}
		},
		
		async onLoad() {
			await this.getOrderList(0)
			await this.getOrderList(1)
			await this.getOrderList(2)
		},
		
		methods: {
			goback(){
				uni.reLaunch({url:'/pages/index/index'}) //要用这个才可以
			},
			addItem(){
				this.$u.route('/pages/schedule/scheduleDetail',{flag:"insert"})
			},
			editItem(item){
				this.$u.route('/pages/schedule/scheduleDetail',item)
			},
			reachBottom() {
				this.loadStatus.splice(this.current,1,"loading")
				setTimeout(() => {
					
					if(this.selectParams.pageIndex<this.totalPages)
					{
					   this.selectParams.pageIndex  = this.selectParams.pageIndex  + 1
					   this.getOrderList(this.selectParams.status);	
					}
					else{
						this.loadStatus.splice(this.current,1,"nomore")
					}
				}, 500);
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;	
			},
			// 获取数据
			async getOrderList(index){
				this.selectParams.status = index
				const res = await this.$u.api.scheduleList(this.selectParams)
				for(let i = 0,length = res.length;i<length;i++)
				{
					res[i].aguid = this.$u.guid()
					this.dataList[this.selectParams.status].push(res[i])
				}
				if(res.length>0)
				{
					this.totalPages =Math.ceil(res[0].guid_count/this.selectParams.pageSize)
				}
				this.loadStatus.splice(this.current,1,"loadmore")
			},
			// 点击tab栏切换 
			change(index) {
				this.swiperCurrent = index;
				
				this.selectParams.status = this.swiperCurrent;
				this.selectParams.pageIndex = 1
				this.totalPages = 0
				this.dataList[this.selectParams.status] = []
				this.getOrderList(this.selectParams.status);
			},
			//条件搜索
			search(){
				this.selectParams.pageIndex = 1
				this.totalPages = 0
				this.dataList[this.selectParams.status] = []
				this.getOrderList(this.selectParams.status)
			},
			//审核工作
			async check(item){
				const wcry = await uni.getStorageSync("username")
				const params = {id:item.id,wcry:wcry,}
				const res = await this.$u.api.scheduleCheck(params)
				if(res.flag && this.swiperCurrent===0)
				{
					// 删除一个item
					this.dataList[0].splice(this.dataList[0].indexOf(item),1);
					this.$refs.uToast.show({title: res.msg})
				}
				else if(res.flag && this.swiperCurrent===2)
				{
					this.$refs.uToast.show({title: res.msg})
					this.search()
				}
				else
				{
					this.$refs.uToast.show({title: res.msg})
				}
			},
		}
	}
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
	.u-demo {
		//height: 200vh;
		height: calc(100% - 44px);
		height: calc(100% - 44px - constant(safe-area-inset-top));
		height: calc(100% - 44px - env(safe-area-inset-top));
	}
	
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}
	.swiper-box {
		flex: 1;
	}
	.swiper-item {
		height: 100%;
	}
	
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}
	
	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}
	
	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
	
	.message-box {
		
	}
	
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		background-color: rgba(240,240, 240, 0.35);
		color: #fff;
		font-size: 22rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}
	
	.map-wrap-text {
		padding: 0 6rpx;
	}
	
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		.item_top {
			width:100%;padding: 20upx;box-sizing: border-box;padding-top: 10upx;
			.item_title{
				font-size: 30upx;color: #ff557f;display: flex;flex-direction: row;
				border-bottom: 1px solid #eee;padding-bottom: 10upx;
				.item_id_laber{width: 150upx;height: 68upx;line-height: 40upx;color: #ffffff;text-align:
				center;font-size: 30upx;border-radius: 4upx;flex-shrink: 0;margin-right: 10upx;
				margin-top: -10upx;
				padding-top: 12upx;}	
			}
			
		}
	}
	
	.color0{background: #ffc63c;}
	.color1{background:  #44dd81;}
	.item_Text:nth-child(1){margin-top: 20upx;}
	.item_Text{font-size: 30upx;color: #999;margin-top: 5upx;display: flex;flex-direction: row;}
	.item_Text view:nth-child(1),.item_user_name{flex-shrink: 0;width: 180upx;text-align: center;}
	.item_bottom{width:100%;padding:10upx 20upx;font-size: 26upx;color: #999;display: flex;flex-direction: row;align-items: center;box-sizing: border-box;border-top: 1px solid #eee;}
	
</style>

效果图：