uniapp 页面顶部选项卡

<template>
	<!-- 顶部选项卡 -->
	<view class="tabs">
		<view 
			class="uni-tab-item" 
			v-for="(tab,index) in tabBars"
			:key="tab.id"
		>
			<text 
				class="uni-tab-item-title"
				:class="{tabActive: tabIndex==tab.id}"
				@click="tarTap(tab)"
			>
				{{tab.name}}
			</text>
		</view>
	</view>
</template>
 
<script>
	export default {
		name: "index-tabbar",
		props:{
			tabBars: Array,
			tabIndex: String
		},
		data(){
			return {
				
			}
		},
		methods:{
			tarTap(item){
				this.$emit("TarTap",item)
			}
		}
	}
</script>
 
<style lang="scss">
	.tabs{
		display: flex;
		flex: 1;
		flex-direction: row;
		overflow-x: scroll;
		height: 100%;
	}
	.uni-tab-item{
		white-space: nowrap;
		line-height: 110rpx;
		height: 110rpx;
	}
	.uni-tab-item-title{
		color: #909399;
		font-size: 32rpx;
		width: 150rpx;
		height: 80rpx;
		line-height: 70rpx;
		display: inline-block;
		text-align: center;
	}
	.tabActive{
		color: #21A78A;
	}
	// 选中后下方横杠
	.tabActive::after {
	    content: '';
	    width: 40%;
	    height: 2rpx;
	    display: block;
	    margin: 0 auto;
	    border-bottom: 4rpx solid #21A78A;
	}

</style>

调用

HTML部分   

		<view>
			<index-tabbar :tabBars="tabBars" @TarTap="TarData" :tabIndex="tabIndex"></index-tabbar>
		</view>
		<view>
             <!-- tabbars组件 -->
			<Assign v-if="currentTabComponent=='Assign'" :tasklist='tasklist'></Assign>
			<Plaza v-else-if="currentTabComponent=='Plaza'" :tasklist='tasklist'></Plaza>
		</view>

JavaScript部分  

    import indexTabbar from '@/pages/task/company/component/topBar.vue';
	import Assign from '@/pages/task/company/component/assign.vue';
	import Plaza from '@/pages/task/company/component/plaza.vue';
	export default {
		data() {
			return {
				tabIndex: "Assign", // 当前tab
				tabBars: [{
						name: "指派单",
						id: "Assign"
					},
					{
						name: "广场单",
						id: "Plaza"
					}
				], // 任务栏列表
				currentTabComponent: "Assign", // 当前组件
			};
		},
		components: {
			indexTabbar,
			Assign,
			Plaza
		},
		beforeCreate() {
			uni.showLoading({
				title: '正在加载中...',
			})
		},
		onPullDownRefresh() {
            // 下拉刷新时执行的方法
			this.refreshList() // 重新获取页面数据
			uni.stopPullDownRefresh(); //停止刷新
		},
		mounted() {
			setTimeout(() => {
				uni.hideLoading()
			}, 500)
		},
		methods:{
			// 刷新任务列表
			refreshList() {
				if (this.tabIndex == 'Assign') {
					this.param.taskType= '1' ;
					receiveTask(this.param).then(res => {
						this.tasklist = JSON.parse(JSON.stringify(res.data.data));
						return this.tasklist
					})
			
				} else if (this.tabIndex == 'Plaza') {
					this.param.taskType= '0' ;
					receiveTask(this.param).then(res => {
						this.tasklist = JSON.parse(JSON.stringify(res.data.data));
						return this.tasklist
					})
				} 
			},
			// 点击tab标签
			TarData(item) {
				//设置id，来显示选中那个标签，显示下划线
				this.tabIndex = item.id;
				//显示标签对应的组件内容
				this.currentTabComponent = item.id
			},
		},
	}