WY音乐播放器制作（3）

• 完整代码地址
  https://github.com/Kevin5979/WYmusic.git

• 我的
• 歌手
• 排行
• 搜索

我的页面

我喜欢的 + 最近听的

我的页面

1. 通过LocalStorage来存储和获取歌曲信息

   • 通过 LocalStorage 来存储和获取用户的操作历史,使得每次进入页面都能拿到上次播放的历史或收藏的歌曲

   • // 设置LocalStorage
     export const setLocalStorage = (key, value) => {
       window.localStorage.setItem(key, JSON.stringify(value))
     }
     
     // 获取LocalStorage
     export const getLocalStorage = key => {
       return JSON.parse(window.localStorage.getItem(key))
     }
     

2. 选项卡切换

   • 通过点击的对象和和设置的下标是否相等，添加active类名，点击之后向父组件传递函数和参数，

     父组件通过参数不同，传递不同的数据（历史或收藏），相关子组件根据数据来渲染页面

   • <li :class="{'active':switchNum === 0}" @click.stop="switchItem(0)">我喜欢的</li>
     <li :class="{'active':switchNum === 1}" @click.stop="switchItem(1)">最近听的</li>
     

   • switchItem(index) {
       this.switchNum = index;
       this.$emit("switchItem", index);
     }
     

   • <ScrollView>
        <SongListItem :songs="switchNum === 0 ? favoriteList : historyList" />
     </ScrollView>
     

3. 组件复用

   • 复用之前封装的组件

     SongListItem（每个歌曲条目）

     ScrollView（滚动组件）

4. 数据实时

   • 每次从vuex中拿到数据，而每次拿到数据都是实时更新的

   • computed: {
       ...mapGetters(["favoriteList", "historyList"])
     }
     

5. 减少请求，优化性能

   • 这里数据都从vuex获取，并不会重新发送请求，性能得到提升

---

歌手页面

歌手页面
歌手详情

1. 数据处理

• 将获取的数据进行分类、重组，构造数据的结果

2. 数据填充 + 侧边栏同步

   • 点击侧边栏的字母，根据字母滚动到字母对应的分组

     滚动歌手列表，侧边字母会根据歌手列表滚动的情况来选中对应的字母

   • css添加滚动效果（transition: all 0.5s）

   • 分组标题吸顶效果（利用IScroll来计算高度进行滚动）

3. 用户体验优化

   • 侧边栏添加滑动效果，通过滑动字母，歌手调整到对应的字母标题（IScroll）

     不需要用户去点击某个字母（touchstart、touchmove 事件）

   • 歌手标题推出推入效果，两个标题相接触，上面的标题被推出

---

排行页面

排行榜页面
排行榜详情

1. 数据处理

   • 由于返回的数据并没有进行分类，需要自己先定义数据，再与请求的数据进行对比

     将对应数据填充到自己定义的数据中

2. 不同排版的实现

   • 对于官方榜和其他榜的排版不一样，不能统一处理，需要分开实现（v-if v-else）

3. 跳转路由动画

   • 使用vue动画过渡

     <transition>
       <router-view></router-view>
     </transition>
     

     .v-enter {
       transform: translateX(100%);
     }
     
     .v-enter-to {
       transform: translateX(0%);
     }
     
     .v-enter-active {
       transition: transform 0.5s;
     }
     
     .v-leave {
       transform: translateX(0%);
     }
     
     .v-leave-to {
       transform: translateX(100%);
     }
     
     .v-leave-active {
       transition: transform 0.5s;
     }
     

---

搜索页面

搜索详情
搜索详情2 搜索详情3

1. input框的双向绑定

• v-model 绑定用户输入的查询字符，进行发送请求

2. 自定义局部指令-函数节流 + 优化性能

   • 由于每输入一个字符都发送一次请求，造成数据请求发送频繁，性能消耗十分大，

     可使用函数节流来控制使发送请求不那么频繁，优化用户体验

       directives: {
         // 自定义局部指令
         // 节流
         throttle: {
           inserted: function(el, obj) {
             let timerId = null;
             let flag = true;
             el.addEventListener("input", function() {
               if (!flag) return;
               flag = false;
               timerId && clearTimeout(timerId);
               timerId = setTimeout(function() {
                 flag = true;
                 // 调用value相当于调用绑定的函数
                 obj.value();
               }, 1000);
             });
           }
         }
       }
     

     <input type="text" placeholder="搜索歌曲、歌手、专辑" v-model="keywords" v-throttle="search" />
     

3. 搜索数据展示

   • 在用户输入关键词后，请求的数据定位在搜索框底部
   • 使用ScrollView组件来添加滚动，展示数据

4. 搜索历史功能

   • 利用LocalStorage来存储和获取用户的搜索历史，实现搜索历史的增删
   • 每次进入搜索页面，搜索历史展示

5. 点击热词或搜索历史

   • 点击热词或搜索历史，数据会自动添加到input框中，自动发起请求

END