CSS奇技淫巧（持续更新）

1. 移动端css隐藏滚动条（ios上流畅滑动）解决方案

效果图：

隐藏滚动条.jpg

HTML代码：

<div class="slider-bar-box">
    <div class="nav-box">
        <div class="list-box">
            <div class="list-item">标题</div>
            <div class="list-item">标题</div>
            <div class="list-item">标题</div>
            <div class="list-item">标题</div>
            <div class="list-item">标题</div>
            <div class="list-item">标题</div>
            <div class="list-item">标题</div>
            <div class="list-item">标题</div>
            <div class="list-item">标题</div>
            <div class="list-item">标题</div>
        </div>              
    </div>
</div>

SCSS代码：

.slider-bar-box{
    height: 90px;
    width: 100%;
    border-bottom: solid 1px #E4E4E4;
    background-color: #fff;
    overflow: hidden;
    .nav-box{
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: #999; 
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
        .list-box{
            width:1360px;
            .list-item{
                float: left;
                font-size: 28px;
                line-height: 90px;
                color: #666;
                padding-left: 40px;
                padding-right: 40px;
            }
        }
    }       
}

主要实现思路：
1.nav-box的外层容器设置了固定高度，并且设置了内容溢出隐藏，所有nav-box的纵向的超出内容是不可见的，即：overflow:hidden;
2.padding-bottom等于20px并非固定值，只要你的设置的值大小足够将滚动条挤出可视区域即可；

2. Vue中动态图片的径相对路径无法正常显示解决方案

通常情况下，我们在vue项目中使用img标签的时候，引入图片的路径都为相对路径，如下：

<img src="../../../assets/logo.png"/>

这种情况浏览器上的图片是可以正常显示的，但如果我们进行动态引入时，会发现浏览器的图片无法正常显示，代码如下：

<template>
    <div class="show-box">
        <img :src="imgSrc"/>
    </div>
</template>

<script>
export default {    
    data(){
        return {
            imgSrc:"../../../assets/logo.png"
        }
    },
}   
</script>

如何让浏览器能够正常显示图片呢？
方案一：
修改imgSrc属性值如下：

<template>
    <div class="show-box">
        <img :src="imgSrc"/>
    </div>
</template>

<script>
export default {    
    data(){
        return {
            imgSrc:require("../../../assets/logo.png"),
        }
    },
}   
</script>

方案二：
将图片文件放入static文件夹中，代码做如下修改：

<template>
    <div class="show-box">
        <img :src="imgSrc"/>
    </div>
</template>

<script>
export default {    
    data(){
        return {
            imgSrc:"../../../../static/logo.png",
        }
    },
}   
</script>