WY音乐播放器制作（3）

2021-02-08 本文已影响0人 kevin5979

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

我的

歌手

排行

搜索

我的页面

我喜欢的 + 最近听的

我的页面

通过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))
}

选项卡切换

通过点击的对象和和设置的下标是否相等，添加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>

组件复用
- 复用之前封装的组件
  
  SongListItem（每个歌曲条目）
  
  ScrollView（滚动组件）
数据实时
- 每次从vuex中拿到数据，而每次拿到数据都是实时更新的
- ```
computed: {
  ...mapGetters(["favoriteList", "historyList"])
}
```
减少请求，优化性能
- 这里数据都从vuex获取，并不会重新发送请求，性能得到提升

歌手页面

歌手详情

数据处理

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

数据填充 + 侧边栏同步
- 点击侧边栏的字母，根据字母滚动到字母对应的分组
  
  滚动歌手列表，侧边字母会根据歌手列表滚动的情况来选中对应的字母
- css添加滚动效果（transition: all 0.5s）
- 分组标题吸顶效果（利用IScroll来计算高度进行滚动）
用户体验优化
- 侧边栏添加滑动效果，通过滑动字母，歌手调整到对应的字母标题（IScroll）
  
  不需要用户去点击某个字母（touchstart、touchmove 事件）
- 歌手标题推出推入效果，两个标题相接触，上面的标题被推出

排行页面

排行榜页面

排行榜详情

数据处理
- 由于返回的数据并没有进行分类，需要自己先定义数据，再与请求的数据进行对比
  
  将对应数据填充到自己定义的数据中
不同排版的实现
- 对于官方榜和其他榜的排版不一样，不能统一处理，需要分开实现（v-if v-else）

跳转路由动画

使用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

input框的双向绑定

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

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

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

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

  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" />

搜索数据展示
- 在用户输入关键词后，请求的数据定位在搜索框底部
- 使用ScrollView组件来添加滚动，展示数据
搜索历史功能
- 利用LocalStorage来存储和获取用户的搜索历史，实现搜索历史的增删
- 每次进入搜索页面，搜索历史展示
点击热词或搜索历史
- 点击热词或搜索历史，数据会自动添加到input框中，自动发起请求

END

WY音乐播放器制作（3）

我的页面

我喜欢的 + 最近听的

歌手页面

排行页面

搜索页面

猜你喜欢

热点阅读