ds_mobile_app/mobile/components/index-tab-menu.vue

<template>
	<view class="content" :style="[{background:backGround}]">
		<view class="nav_wrap">
			<view class="nav_item" v-for="(item,index) in tabInfo" :key="index" @click="changeTab(index,item.categoryId)">
				<view :class="currIndex == index?'active_nav nav_text':'nav_text'">{{item.categoryName}}</view>
				<image :src="icon" mode="" class="nav_icon" v-if="currIndex == index"></image>
			</view>
		</view>
		<view class="gap_line"></view>
		<view class="sort_wrap" @click="toSortPage">
			<image :src="sortImg" mode=""></image>
			<text>分类</text>
		</view>
	</view>
</template>

<script>
	export default{
		name:'tabMenu',
		data(){
			return {
				icon:getApp().globalData.imgUrl+'index/icon.png',
				sortImg:getApp().globalData.imgUrl+'index/sort.png',
				currIndex:0
			}
		},
		props: ['backGround','tabInfo'],
		methods:{
			changeTab(index,categoryId){
				this.currIndex = index
				if(index>0){
					let param = {}
					param.method = 'GET'
					param.url = 'v3/goods/front/goods/category/list?categoryId1='+categoryId
					this.$request(param).then(res=>{
						if(res.state == 200){
							this.$emit('getChildList',res.data.list[index-1],index)
						}
					})
				}else{
					this.$emit('getChildList',null,index)
				}
			},
			toSortPage(){
				uni.switchTab({
					url:`/pages/category/category`
				})
			}
		}
	}
</script>

<style lang='scss'>
	.content{
		position:fixed;
		top:0;
		/* left:0; */
		/* #ifdef APP-PLUS */
		top: var(--status-bar-height);
		/* #endif */
		width:750rpx;
		padding:0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		/* #ifndef MP */
		padding-top:110rpx;
		/* #endif */
		/* #ifdef MP */
		padding-top:50px;
		/* #endif */
		background: linear-gradient(90deg, #6984a4 0%, #3a4b5c 100%);
		z-index: 1000;
		/* #ifndef H5 */
		left: 0;
		/* #endif */
		/* #ifndef MP */
		height: 160rpx;
		/* #endif */
		/* #ifdef MP */
		height: calc(50px + 60rpx);
		/* #endif */
		overflow-y: hidden;
		.nav_wrap{
			width:580rpx;
			/* #ifdef MP-WEIXIN */
			height:auto;
			/* #endif */
			/* #ifndef MP-WEIXIN */
			height:84rpx;
			/* #endif */
			display:flex;
			overflow-x: scroll;
			padding-top: -9rpx;
			float: left;
			.nav_item{
				margin-right:35rpx;
				display:flex;
				flex-direction: column;
				align-items: center;
				/* #ifndef MP-WEIXIN */
				padding-top: 12rpx; 
				/* #endif */
				box-sizing: border-box;
				.nav_text{
					font-size:32rpx;
					color:#fff;
					white-space: nowrap;
					line-height: 38rpx;
				}
				.nav_icon{
					width:27rpx;
					height:9rpx;
				}
			}	
		}
		.gap_line{
			width:13rpx;
			height:30rpx;
			background: linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
			opacity: 0.8;
			float: left;
			margin-right:6rpx;
			margin-left: 4rpx;
			align-self: end;
			/* #ifdef MP-WEIXIN */
			margin-top: 10rpx;
			/* #endif */
		}
		.sort_wrap{
			font-size:30rpx;
			color:#fff;
			display: flex;
			justify-content: flex-start;
			box-sizing: border-box; 
			float: right;
			text-align: right;
			width: max-content;
			margin-top: -20rpx;
			image{
				width:32rpx;
				height:26rpx;
				margin:8rpx 7rpx 0 7rpx;
			}
			text{
				line-height:30rpx;
				display: inline-block;
				margin-top: 8rpx;
			}
		}
	}
	.active_nav{
		font-weight: bold;
		margin-bottom:6rpx;
	}
</style>