tabbar

效果：

html

<view class="content">
		<view class="uni_tab_bar">
			<view class="uni_swiper_tab order_top">
				<block v-for="(item,index) in tabs">
					<view class="swiper_tab_list" :class="{'active': tabIndex==item.id}" @tap="toggleTab(item.id)">
						{{item.title}}
						<view class="swiper_tab_line">
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="order_centext">
		　　<swiper :current="tabIndex" @change="tabChange" class="order_centext">
		　　　　<swiper-item v-for="(item,index) in order_list">
		　　　　　　<view class="swiper_item" v-for="(item_child,index) in item.order_child">
						<view class="img_wrapper">
							<view class="img">{{item_child.img}}</view>
						</view>
						<view class="info">
							<view class="row1">
								<view class="name">{{item_child.name}}</view>
								<view class="integral">+{{item_child.integral}}积分</view>
							</view>
							<view class="row2">
								<view class="type">{{item_child.type}}</view>
							</view>
							<view class="row3">
								<view class="time">{{item_child.time}}</view>
								<view class="status">{{item_child.status}}</view>
							</view>
						</view>
					</view>
		　　　　</swiper-item>
		　　</swiper>
		</view>
	</view>

JS

export default{
		data() {
			return{
				tabIndex:'0',
				tabs:[
					{title:'全部',id:'0'},
					{title:'未通过',id:'1'},
					{title:'已完成',id:'2'},
				],
				order_list:[
					{
						order_child:[
							{
								img:'',
								name:'天天',
								integral:3000,
								type:'拼多多砍价任务',
								time:'2020/12/13 14:45',
								status:'已完成'
							},
							{
								img:'',
								name:'天天',
								integral:3000,
								type:'拼多多砍价任务',
								time:'2020/12/13 14:45',
								status:'已完成'
							},
							{
								img:'',
								name:'天天',
								integral:3000,
								type:'拼多多砍价任务',
								time:'2020/12/13 14:45',
								status:'已完成'
							}
						]
						
					},
					{
						order_child:[
							{
								img:'',
								name:'天天',
								integral:3000,
								type:'拼多多砍价任务',
								time:'2020/12/13 14:45',
								status:'未通过'
							},
							{
								img:'',
								name:'天天',
								integral:3000,
								type:'拼多多砍价任务',
								time:'2020/12/13 14:45',
								status:'未通过'
							},
							{
								img:'',
								name:'天天',
								integral:3000,
								type:'拼多多砍价任务',
								time:'2020/12/13 14:45',
								status:'未通过'
							}
						]
					},
					{
						order_child:[
							{
								img:'',
								name:'天天',
								integral:3000,
								type:'拼多多砍价任务',
								time:'2020/12/13 14:45',
								status:'已完成'
							},
							{
								img:'',
								name:'天天',
								integral:3000,
								type:'拼多多砍价任务',
								time:'2020/12/13 14:45',
								status:'已完成'
							},
							{
								img:'',
								name:'天天',
								integral:3000,
								type:'拼多多砍价任务',
								time:'2020/12/13 14:45',
								status:'已完成'
							}
						]
					}
				]
			}
		},
		methods:{
			goToPage(url) {
				if (!url) return;
				uni.navigateTo({
					url
				});
			},
			toggleTab(index) {
			　　this.tabIndex = index;
			},
			tabChange(e) {
			    const tabIndex = e.detail.current
			    this.tabIndex = tabIndex
			}
		},
	}

CSS

.order_top {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: #FFFFFF;
	}
	
	.swiper_tab_list {
	color: #888888;
	font-weight: bold;
	}
	
	.uni_tab_bar .active {
	color: #FF334C;
	margin-top: 17rpx;
	background-color: #FFFFFF;
	}
	
	.active .swiper_tab_line {
	border-bottom: 4rpx solid #FF334C;
	width: 50rpx;
	margin: auto;
	margin-top: 17rpx;
	background-color: #0B9C13;
	}
	
	.uni_swiper_tab {
	border-bottom: 2rpx solid #eeeeee;
	margin-bottom: 15rpx;
	}
	
	.order_centext {
	height: 800rpx;
	position: fixed;
	top: 160rpx;
	left: 0;
	right: 0;
	bottom: 0;
	margin-left: 15rpx;
	margin-right: 15rpx;
	}
	.swiper_item{
		width: 92%;
		height: 100px;
		margin: 0 auto;
		display: flex;
		border-bottom: 1px solid #ebebeb;
	}
	.img_wrapper{
		flex: 0 0 23%;
	}
	.img{
		width: 60px;
		height: 60px;
		border-radius: 50px;
		margin: 12px 0 0 5px;
		background-image: url(/static/img/eee.jpg);
	}
	.info{
		flex: 1;
	}
	.row1{
		height: 30px;
		width: 100%;
		margin-top: 10px;
	}
	.name{
		float: left;
		font-size: 18px;
	}
	.integral{
		float: right;
		color: #C9485E;
		font-size: 18px;
	}
	.row2{
		height: 30px;
	}
	.type{
		width: 122px;
		height: 23px;
		background-color: #FDF4ED;
		color: #DD895B;
		text-align: center;
		line-height: 23px;
		font-size: 15px;
		font-weight: 500;
		border-radius: 10px;
	}
	.row3{
		height: 30px;
		width: 100%;
	}
	.time{
		float: left;
		color: #A8A8A8;
	}
	.status{
		float: right;
		color: #7D7D7D;
	}