移动端 网易云 左右滚动导航栏

移动端 网易云 左右滚动导航栏

先看效果

这边用vue演示：

方法一：

display: flex;
overflow-y: auto;  /*overflow-y: scroll/hiddle;也行*/

利用flex和overflow-y可以帮我们实现左右滚动，但是有滚动条

利用伪对象选择器，实现隐藏

ul::-webkit-scrollbar {
    display: none;
}

flex布局在横向排列时，子元素的宽度会失效，这时，可以给子元素通过下面的属性固定宽度。

flex: 0 0 50px; /* 设置固定宽度 */

完整代码

<template>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
* {
        margin: 0;
        padding: 0;
    }
    ul {
        background: gold;
        display: flex;
        overflow-y: auto;
    }

    ul::-webkit-scrollbar {
        display: none;
    }

    ul li {
        /* width: 50px;设置了也不生效 */
        height: 30px;
        background: tomato;
        margin: 10px;
        list-style: none;        
        flex: 0 0 50px; /* 设置固定宽度 */
    }
</style>

方法二：

先把子元素变成内联块，让子元素自动在父容器中横排列

display: inline-block;

在父容器添加让子元素不换行，可以滚动

white-space: nowrap;
overflow-y: auto;

这个方法同样会出现滚动条，同样利用隐藏

ul::-webkit-scrollbar {
    display: none;
}

完整代码

<template>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
	*{margin: 0;padding: 0;}
	ul{
	    background: pink;
	    white-space: nowrap;
	    overflow-y: auto;
	    /* -webkit-overflow-scrolling: touch;添加手滑模式touch  */
	}
	ul li{
	    width: 50px;
	    height: 30px;
	    background: yellow;
	    margin:10px;
	    list-style: none;
	    display: inline-block;
	}
</style>