uniapp 微信小程序 scroll-view实现水平滚动

效果：

           <scroll-view scroll-x="true" class="data-list">
               <view v-for="(item, index) in dataList" :key="index" class="data-list-item" @tap="tapData(index)" :class="{'data-list-item-active':dataSelect.indexOf(index)>-1}" >
                    <view>
                        {{item.name}}
                    </view>   
               </view>
            </scroll-view>

.data-list{
    width: 100%;
    padding: 0 20rpx;
    background-color: white;
    white-space: nowrap;
}
.data-list-item{
    display: inline-block;
    margin: 16rpx 6rpx;
    padding: 10rpx 20rpx;
    font-size: 26rpx;
    text-align: center;
    border: 2rpx solid #ddd;
    border-radius: 999rpx;
}
.data-list-item-active{
    color: #23CFF7;
    background-color: rgb(229,248,242);
    border: 2rpx solid #23CFF7;
}