ds_mobile_app/mobile/standard/point/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.labelId,item)">
				<view :class="currIndex == index?'active_nav nav_text':'nav_text'">{{item.labelName}}</view>
				<image :src="icon" mode="" class="nav_icon" v-if="currIndex == index"></image>
			</view>
		</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,labelId){
				this.currIndex = index
				if(index>0){
					let param = {}
					param.data={}
					param.data.labelId=labelId
					param.url = 'v3/integral/front/integral/mall/list'
					param.method = 'GET'
					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;
		padding-top:110rpx;
		/* #ifdef MP */
		padding-top:102rpx;
		/* #endif */
		background: #7B2AD0;
		z-index: 1000;
		/* #ifndef H5 */
		left: 0;
		/* #endif */
		height: 160rpx;
		overflow-y: hidden;
		.nav_wrap{
			height:84rpx;
			display:flex;
			overflow-x: scroll;
			float: left;
			.nav_item{
				margin-right:35rpx;
				display:flex;
				flex-direction: column;
				align-items: center;
				padding-top:12rpx;
				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;
			margin-top: 17rpx;
		}
		.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: -9rpx;
			image{
				width:32rpx;
				height:26rpx;
				margin:0 7rpx 0 7rpx;
			}
			text{
				line-height:30rpx;
			}
		}
	}
	.active_nav{
		font-weight: bold;
		margin-bottom:6rpx;
	}
</style>