uni-app中，自定义tab切换

scroll-view横向滚动 tab

<scroll-view class="scroll-view_H" :scroll-left="scrollLeft" scroll-x="true">
	<view class="slide_type_list">
		<view class="slide_type_list_view" v-for="(item,index) in typeList" :key="index" :class="{is_selected:active==index}" @click="changeType(item,index)">
			<view>{{item.name}}</view>
		</view>
	</view>
</scroll-view>

切换内容

<view class="content" v-for="(item,index) in snList" :key="index" v-show="index==active">
<view>

data中的数据需要typeList、active切换状态

active:0,
typeList:[
	{
		name:'M-无押金'
	},{
		name:'M-无押金1'
	},{
		name:'M-无押金2'
	},{
		name:'M-无押金3'
	},{
		name:'M-无押金4
	},{
		name:'M-无押金5'
	}
]

点击进行切换 传index 当index和active相同是 进行切换

changeType(item,index){
	this.active=index;
},

css样式

// 横向滑动tab
.scroll-view_H{
	background-color: #FFFFFF;
	.slide_type_list{
		display: flex;
		padding: 20upx 30upx;
		.slide_type_list_view{
			padding-bottom: 10upx;
			font-size: 28upx;
			color: #83839f;
			margin-right: 30upx;
			view{
				width: 150upx;
				text-align: center;
			}
		}
		.is_selected{
			color: #252529;
			font-weight: bold;
			position: relative;
		}
		.is_selected:before{
			content: '';
			position: absolute;
			width: 62upx;
			height: 4upx;
			left: 50%;
			margin-left: -31upx;
			bottom: -20upx;
			background-color: #ff5857;
		}
	}
}

实现效果如图：