微信小程序scroll-view横向滚动问题

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})

},

亲测有效。