使用electron仿网易云PC端界面遇到的困难（静态页面）

一、对比差异

首先看看原版

 这是成品

 二、细节处理

        本项目的全图标都是在阿里巴巴矢量库找的

        顶栏

        顶栏以及推荐歌单部分原本使用float布局，可是float会出现图片偏移，导致其他布局错乱（这次项目是实战静态页面，牵一发而动全身）

        

        页面切换 

         tab栏连带页面的切换，原计划是使用jQuery，但在electron框架中加载node.js后，jQ便失效了，于是这个切换效果这里采用原生js代码

//获取元素
var tab_list = document.querySelectorAll(".rightTop a");
var item = document.querySelectorAll(".rightMain");
//遍历元素
for (var i = 0; i < tab_list.length; i++) {
  //给每个元素添加一个index属性
  tab_list[i].index = i;
  tab_list[i].onclick = function () {
    for (var j = 0; j < tab_list.length; j++) {
      //用来删除current类名和隐藏item元素
      tab_list[j].className = "";
      item[j].style.display = "none";
    }
    this.className = "rightChange";
    item[this.index].style.display = "inline-block";
  };
}

        这里赋予rightChange的display属性为"inline-block"的原因是页面使用了flex布局，而外面的盒子使用inline名可以直接采用父类元素，方便统一样式

     滚动条

       在原版网易云右侧页面中，存放着多个模块功能，例如： 推荐歌单，热门博客，热门歌手等等，所以在本次仿网易云项目中，也需要设置一个滚动条，我们使用

overflow: auto;

         这样又会产生新的问题，那么顶栏也会跟随页面上下移动。那么我们需要让它一直置顶，需要写死顶栏，我们使用position定位来写（样式）

  width: 100%;
  height: 6vh;
  line-height: 5vh;
  position: fixed;
  z-index: 9999;
  background-color: #fff;

        使用fixed来确定元素的位置，因为fixed是相对于浏览器窗口是固定位置，然后使用z-index设置9999来使其一直保持在最上层

三、总结

        这是我前端的第一个项目，还有许多欠缺，比如底部的音量修改，歌词文件的读取和点击图片后的页面跳转 搜索的接口等都没有完善，路还很长，砥砺前行