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;
}
}
}
实现效果如图: