tabs栏一行左右滑动

1、html代码（vue.js）

<div class="tabs row">
     <div class="tab" v-text="item.name" v-for="(item,index) in tabs" :key="index" :class="[index==selectIndex?'active':'']" @click="select(index)"></div>
</div>

2、style(less)

.tab首先要加上white-space: nowrap;否则内容会往下挤压，.tabs::-webkit-scrollbar{display: none;}去除了滚动条，安卓机上和google模拟器上生效,在我的ios微信浏览器上却不生效，解决方法第三步（在tabs外层加一个wapper，并设style="overflow: hidden"），解决了问题

.tabs{
        border: none;
        margin-bottom: 0.16rem;
        height: 1.2rem;
        background-color: #fff;
        overflow-x: scroll;
        // width: 100%;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
        -webkit-overflow-scrolling: touch;
        &::-webkit-scrollbar{display: none;}
        .tab{
            padding:0 0.4rem;
            white-space: nowrap;
            height: 1.2rem;
            line-height: 1.2rem;
            font-size: @title-size;
            &.active{
                color: @base;
                border-bottom: 0.0533rem solid @base
            }
        }
    }

3、解决ios微信浏览器滚动条不消失问题

 <div style="overflow: hidden">
     <div class="tabs row">
         <div class="tab" v-text="item.name" v-for="(item,index) in tabs" :key="index" :class="[index==selectIndex?'active':'']" @click="select(index)"></div>
     </div>
</div>