tabs栏一行左右滑动

1、html代码(vue.js)

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微信浏览器滚动条不消失问题

 

 

你可能感兴趣的:(布局)