uni-app菜单栏tab切换实现

uni-app菜单栏tab切换实现

效果如下：

代码示例：

<template>
	<view>
		<view class="tab" >    
            <view class="tabItem" :class="{'active' : index == current}"
			 @click="clickTab(index,item.type)"
			v-for="(item,index) in tabItemList" :key="index">
                {{item.name}}
            </view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				current:0,
				currentType: 'description',
				tabItemList: [
					{'name':'简介','type':'description'},
					{'name':'目录','type':'directory'},
				],
			}
		},
		onLoad(e) {
			
		},
		methods: {
			clickTab(cur,type){
			    this.current = cur
				this.currentType=type;
				
				//切换后的业务逻辑
			},
		}
	}
</script>

<style>
	/* 切换菜单 */
	.tab{
		display: flex;
	}
	.tabItem{
		width: 100%;
		text-align: center;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		color: #666666;
	}
	.active{
		font-weight: bold;
		color:black;
		border-bottom:solid 1rpx skyblue;
	}
	
</style>