esswisdom_app/components/wade-tabbar/wade-tabbar.vue

<template>
	<view>
		<scroll-view class="tab-bar" scroll-x="true" show-scrollbar="false">
			<view class="tab-item" :class="index==curIndex?'active':''" v-for="(item ,index) in tabList" @click="clickNav(index)">
				{{item.name}}
			</view>
		</scroll-view>
		<view class="tab-bar-line"></view>
	</view>
</template>

<script>
	export default {
		name:"wade-tabbar",
		props:{
			tabList:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				curIndex:0
			};
		},
		methods:{
			clickNav(index){
				console.log("clickNav")
				this.curIndex = index
				this.$emit("clickNav",index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-bar{
		height: 100rpx;
		background: #f7f8fa;
		position: fixed;
		left:0;
		top:var(--window-top);
		z-index:10;
		white-space: nowrap;
		
		.tab-item{
			font-size: 35rpx;
			display: inline-block;
			line-height: 100rpx;
			margin: 0 10rpx;
			text-align: center;
			width: 100upx;
			height: 75upx;
		}
		.active{
			color:#31c27c;
			font-weight: 500;
			border-bottom: 5rpx solid #31c27c;
		}
	}
	// .tab-bar-line {
	// 	width: 100%;
	// 	height: 2rpx;
	// 	background-color: #aa55ff;
	// }
</style>