本文已参与[新人创作礼]活动， 一起开启掘金创作之路。

前言

最近在整理U盘的时候 发现了一个宝藏

记得那还是两年前

还是编程菜鸡的我有一天机缘巧合在b站看到了pink老师的视频

一下子就被吸引到了前端世界里去

从此就像打了鸡血一样，日夜废寝忘食的学习html、css、js、vue

然后上网买了套PSD格式的UI界面图，一边尽力还原效果图，一边写页面逻辑

终于做成了这个

《闪闪的云音乐》

满满的回忆，满满的青春岁月

哥的青春就像这个项目的界面一样缤纷多彩

界面如下：

这是一个类似SPA单页面应用的网页，

最离谱的是当初我甚至不会vue-router

用了点css的技巧，充分发挥奇思妙想，还是把点击下方导航栏切换页面显示效果的功能搞出来了

实现讲解

由于代码量过大

这里先折叠代码，将大体思路讲解一下

界面设计

在学前端学到中期的时候，有一件困扰我的事情就是，

我是理工男，没有艺术细胞

也不能说没有艺术细胞，欣赏美的眼光还是有的

只是不会设计，不能自己从零实现一幅震撼人心的艺术创作

就像学了PS的操作，知道各种工具的使用，却不懂如何做点好看的作品

但是作为一个前端程序员，用自己的双手和大脑去丈量艺术稿，去还原她 ，这点实力还是有的

因此我直接搜索并下单了 UI设计稿

如图：

好像不赖哦，淘到宝贝了

但是打开PSD文件后，我有点傻眼

····你懂我的意思吧

这·····咋才几张图片叠起来

不管了，缺的图自己上网找来补，页面不够自己凑

反正现在我就是自己的客户，自己的产品经理

页面还原

页面布局用的div+css来做，子绝父相的技巧还是很方便的

由于做的的是面向移动端的网页

因此用了点流式布局的技巧，宽度百分比，高度绝对值

反正有稿子在手

不断的思考用几个盒子套，怎么排布就好。

如何不用vue-router实现当前页面内容切换

先上折叠代码 看看基本内容

画一张图片演示：

页面处理

总的思路是这样的

定义一个外部得小盒子，小盒子里面有个大盒子

这个大盒子是外面小盒子的4倍宽度

那我们有三个页面，每个页面占用内部大盒子25%的宽度

你可以让这几个页面盒子float浮动起来，或者flex布局

反正让他们同一行就好

(最后一个盒子就空白不管，主要是偶数除得尽，纯凑数)

接着给外面的小盒子设置 over-flow: hidden

这样，内部大盒子超出的部分，就被遮挡了起来。

且默认显示第一个页面。

底部导航栏跳转

先书写好三个css样式，

目标是这样的：

样式1可以让我页面内容那个超大盒子，往左 动画移动25%，这样就实现了切换第二个页面

同理：

样式2可以让我页面内容那个超大盒子，往左 动画移动50%，这样就实现了切换第三个页面

样式3可以让我页面内容那个超大盒子，往左 动画移动0%，这样就实现了切换回到第1个页面

当然样式3可以忽略，直接切回最初的css样式就好

我们下方放了三个小盒子作为导航栏

这个时候可以为他们绑定点击事件

点击不同的导航按钮，为大盒子分别设置不同的CSS样式

/* 用于js切换画面 */
.box_play{
    width: 400%;
    height: 720px;
    transform: translate(-25%);
}
.box_self{
    width: 400%;
    height: 720px;
    transform: translate(-50%);
}

  box=document.getElementById("box");

//   导航栏跳转功能
  go_search.onclick=function(){
      console.log("搜歌--点击");
      box.className="box";
  }
  go_play.onclick=function(){
      console.log("播放--点击");
      box.className="box_play";
  }
  go_self.onclick=function(){
      console.log("我的--点击");
      box.className="box_self";
  }

音乐播放api

互联网面有很多开放资源可以使用

就比如音乐api接口

这些搜罗一下还是很方便的

有了api接口，播放音乐的事情也就简单了

写个video标签

用axios发起请求，获取音乐资源

用vue操作video，进行加载资源、播放、暂停、下一首、上一首···种种操作

<!-- 音乐播放模块 -->
               <div class="play">
                   <div class="play_top">
                       <div></div>
                       <div></div>
                   </div>
                   <div class="play_one">
                       <div class="play_one_lyric">
                           <div>There has to be faith</div>
                           <div>Which is not expressed</div>
                           <div>In things to which you cling</div>
                       </div>
                   </div>

                   <div class="play_two"></div>

                   <div class="play_three">

                    <div class="song_name">{{songName}}</div>
                    <div class="song_author">{{songAuthor}}</div>
                    <div class="song_index">
                        <audio controls id="audio">   
                            <source v-bind:src="musicUrl" type="audio/mpeg">
                            <source v-bind:src="musicUrl" type="audio/ogg">
                          您的浏览器不支持 audio 元素。
                          </audio>
                          
                   </div>
                   <div class="song_control">
                       <div v-on:click=outArrIndex()></div>
                       <div v-on:click=lastplay()></div>
                       <div id="playSign" v-on:click=playStatess()></div>
                       <div v-on:click=nextplay()></div>
                       <div></div>
                   </div>
                   </div>
               </div>

//音乐搜索
      searchMusic: function() { 
          this.num=this.num+1;
          var that=this;
          console.log("搜索音乐--"+that.num+"--"+that.searchTxt);
          axios.get("https://autumnfish.cn/search?keywords=" + that.searchTxt).then(
            function(response) {             
              // for(var i=0;i<5;i++){    //使用索引是无法响应式的         
              //    that.musicArr[i]=response.data.result.songs[i];
              // }
              that.musicArr=response.data.result.songs;
              console.log(that.musicArr);
              console.log("-------------------");
            },
            function(err) {}
          );
      },
      //音乐播放playMusic(item.id,item.name,item.artists[0].name)
      playMusic:function(musicId,songname,songauthor){
        console.log(musicId);
        var that = this;
        that.songName=songname;
        that.songAuthor=songauthor;
        that.playstate=1;
        that.nowID=musicId;
       // 获取歌曲地址
        axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
         function(response) {
           that.musicUrl = response.data.data[0].url;
           console.log(that.musicUrl);

           //v-bind未知的bug，无法播放，改用dom操作
           var audio =document.querySelector('#audio');
           audio.src=that.musicUrl;
           audio.play();

           //跳转播放页
           var playpage =document.querySelector('#box');
           playpage.className="box_play";

       },
         function(err) {}
       )
       //修改播放图标
       var playsign=document.querySelector('#playSign');
       playsign.innerHTML="";
      },

      // 当前播放音乐在音乐数组的第几个
      outArrIndex:function(){
           for(var i=0;i<this.musicArr.length;i++)
           {
             console.log("nowID="+this.nowID+"|"+"当前musicArr[].id="+this.musicArr[i].id);
             if(this.nowID==this.musicArr[i].id)
             {
               console.log("第"+i+"个数组");
               return i;
             }
           }
      },
      //上一首playMusic(item.id,item.name,item.artists[0].name)
      lastplay:function(){
       var MyIndex =this.outArrIndex();
       var that=this;
       if(MyIndex==0){
       }
       else{
         this.playMusic(that.musicArr[MyIndex-1].id,that.musicArr[MyIndex-1].name,that.musicArr[MyIndex-1].artists[0].name)
       }
      },
      //下一首
      nextplay:function(){
        var MyIndex =this.outArrIndex();
        var that=this;
        if(MyIndex==that.musicArr.length){
        }
        else{
          this.playMusic(that.musicArr[MyIndex+1].id,that.musicArr[MyIndex+1].name,that.musicArr[MyIndex+1].artists[0].name)
        }
       },
      //播放暂停
      playStatess:function(){
        console.log("调用成功");
       var that=this;
       var playsign=document.querySelector('#playSign');
       var audio =document.querySelector('#audio');
       console.log("判断播放状态");
       //判断播放状态,1在播放，否则0不在播放
       if(that.playstate==1)
       {console.log("1，在播放给它暂停");
         audio.pause();
         playsign.innerHTML="";
         that.playstate=0;
       }
       else{
        console.log("0，在暂停给他播放");
        audio.play();
        playsign.innerHTML="";
        that.playstate=1;
       }
      }
      // 点赞
      //单曲循环或不循环

    }