wxml:
<view class="slider">
<scroll-view class="box" bindtap='swit' scroll-x style="width: auto;overflow:hidden;">
<view class="{{id==1?'active':''}}" data-id='1'>金融圈</view>
<view class="{{id==2?'active':''}}" data-id='2'>金融</view>
<view class="{{id==3?'active':''}}" data-id='3'>金融圈圈</view>
<view class="{{id==4?'active':''}}" data-id='4'>金融圈</view>
<view class="{{id==5?'active':''}}" data-id='5'>金融</view>
<view class="{{id==6?'active':''}}" data-id='6'>金融圈圈</view>
<view class="{{id==7?'active':''}}" data-id='7'>金融圈</view>
<view class="{{id==8?'active':''}}" data-id='8'>金融</view>
<view class="{{id==9?'active':''}}" data-id='9'>金融圈圈</view>
</scroll-view>
</view>
wxss:
.slider{
width: 750rpx;
height: 106rpx;
overflow: hidden;
background: #fff;
white-space: nowrap;
}
.slider .box view{
display: inline-block;
padding: 30rpx 6rpx;
margin: 0 30rpx;
color: #8A8A8A;
font-size: 30rpx;
}
.slider .box .active{
border-bottom: 4rpx solid #7BB6A6;
color: #7BB6A6 !important;
}
js:
data: {
id:1
},
swit(e){
var id=e.target.dataset.id;
this.setData({id:id})
},
亲测有效。