【vue】音乐播放器实现笔记

本片文章用来记录在实现音乐播放器时所复习到的知识点。

1.css部分

（1）精灵图的使用

精灵图(Sprite)，也称作雪碧图，如下所示。即把很多的小图片合并到一张较大的图片里，在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。

使用：将精灵图设置为背景图片，设置好显示区域大小，然后通过移动背景图(background-position)显示精灵图中需要的部分。

.item i {
   
    display: inline-block;
    width: 23px;
    height: 17px;
    background: url("../images/table.png") -60px -48px;
    vertical-align: middle;
}

（2）实现可滚动列表并隐藏滚动条

歌曲列表过长，需要实现滚动浏览列表，但是想要隐藏不美观的滚动条。

<!--html代码-->
<div class="left">
    <ul class="list">
        <li class="item" v-for="item in musicList">
            <a href="javaxript:;" @click="songPlay(item.id)"></a>
            <span>{
  {item.name}}</span>
            <i v-if="item.mvid!=0" @click="playMv(item.mvid)"></i>
        </li>

    </ul>
</div>

/* css代码 */
::-webkit-scrollbar