1.html代码
<view class="">
<scroll-view scroll-x="true" :scroll-with-animation='true class="scroll-view" :scroll-into-view="tid">
<view v-for="(item,index) in lbList" :key='index' class="scroll-icon" :id="'text'+index" @click="changeColor(index)" :class="[indexs == index ? 'active' :'']">
{{item.title}}
</view>
</scroll-view>
</view>
2.css代码
.scroll-view{white-space: nowrap;padding: 0 4%;}
.scroll-icon{display: inline-block;padding:1rem;}
.active{position: relative;}
.active::after{position: absolute;content: '';width: 40rpx;height: 4rpx;background-color: #FE3B0F;bottom: 22rpx;left: 50%;transform: translateX(-50%);}
3.js代码
export default {
data(){
return{
indexs:0,
lbList:[],
tid:''
}
},
methods:{
changeColor(e){
this.indexs = e;
this.tid = 'text'+e;
},
}
}