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="
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)