【Vue3网易云音乐项目实战教程】六、歌单列表模块与播放条(1)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情。

前言

前面我们实现了首页模块，本章节我们就实现音乐网站的重点，网站中常见的播放列表。废话不多说，开始动手了！

歌单列表

歌单列表在音乐网站多处使用过，比如歌单的详情页、排行榜的详情页、底部播放条上的当前播放列表等。我们可以封装成组件分别复用。

看到上面UI图，然后根据需求，我们可以将歌曲列表大致分为两种类型。

1、歌单详情页的，显示序号、歌曲名称、歌手昵称、专辑名、以及歌曲时长，我们可以将歌曲进行收藏及添加到播放列表；分页加载

2、播放条的播放列表，显示序号、歌曲名称、歌手昵称、时长，对歌曲收藏及将歌曲从当前播放列表删除的操作；滚动加载

// SongList.vue
const props = defineProps({
    songList: { // 歌曲列表
        type: Array,
        required: true
    },
    typeSize: { // 播放列表展示类型， 默认normal是歌单下的展示列表，mini是播放条下的歌曲列表的
        type: String,
        default: 'normal'
    },
    isScroll: {  // 分页加载 || 无限滚动加载
        type: Boolean,
        default: false
    },
    pageSize: { // 分页 每页展示数量
        type: Number,
        default: 20
    },
});

首页我们将获取到的歌曲列表数据进行处理。根据是否分页进行分隔处理。

// 获取歌曲列表
const list = computed(() => {
    if (!props.isScroll) { // 分页加载数据
        return props.songList.slice((currentPage.value - 1) * props.pageSize, currentPage.value * props.pageSize);
    } else {
        return props.songList
    }
});

将列表的序号格式化一下

// 渲染歌单列表，表格列表序号格式化
const indexMethod = (page) => {
    if (!props.isScroll) {
        return (currentPage.value - 1) * props.pageSize + page + 1
    } else {
        return page + 1
    }
};

显示当前列表歌曲的播放状态，若当前在播放歌曲ing，且列表中有当前播放的歌曲，可切换播放暂停状态及显示状态icon。

// 当前播放歌曲icon状态
const playIcon = computed(() => {
    return item => {
        return ['iconfont', 'playicon', playListInfoStore.isPlayed && (item.id === curSongInfo.value.id) ? 'icon-pause' : 'icon-play']
    }
});

当我点击列表中歌曲状态的时候，我们需要进行如下操作，若是在非当前播放列表中操作，即其他页面的详情页里的歌曲列表中，我们需要将当前歌曲添加到播放列表及存在浏览器本地。若是在当前播放列表中操作，我们就只是在播放暂停的状态中进行切换。

const playListInfoStore = store.playListInfoStore();

// 列表点击播放/暂停当前音乐
const playCurrentSong = (item) => {
    // 若当前唔歌曲 或者 当前播放歌曲不是本歌单显示的歌曲  立即播放当前歌单
    if (!curSongInfo.value || curSongInfo.value.id != item.id) {
        playListInfoStore.selectPlay([item]);
    } else {
        playListInfoStore.$patch({
            isPlayed: !playListInfoStore.isPlayed
        })
    }
}

Tips:

添加歌曲到当前播放列表，需要对歌曲数据进行去重，已添加的歌曲不需再添加；及时更新当前歌曲播放索引及播放状态，将更新后的列表数据及索引值存在本地缓存当中。

// store.js  ===>   selectPlay方法

this.playList = list;   // 更新后的list
this.playIndex = index; // 更新后的当前歌曲索引值
this.isPlayed = true;   // 播放状态

window.localStorage.setItem('PLAYLIST', JSON.stringify(this.playList));
window.localStorage.setItem('PLAYINDEX', this.playIndex);

添加歌曲到播放列表

// 添加当前歌曲到播放列表
const addSongList = (item) => {
    playListInfoStore.addToList([item]);
};

// addToList 方法

this.playList = playList;
window.localStorage.setItem('PLAYLIST', JSON.stringify(playList));

删除当前播放列表歌曲

在播放列表中，删除当前选中歌曲，若是歌曲数量大于1的话，此时有两种情况，若需要删除的歌曲在当前播放的歌曲前面，我们需要更新一下当前播放歌曲的索引；若是在之后，只需删除播放列表中的数据，同时重新更新一下当前播放列表的数据及本地数据缓存。

// 在播放列表删除歌曲，播放列表、播放索引重置更新
const delItem = (index) => {
    if (playListInfoStore.playList.length > 1) {
        playListInfoStore.playList.splice(index, 1);
        
        if (playListInfoStore.playIndex >= index) {
            playListInfoStore.setPlayIndex(playListInfoStore.playIndex - 1);
        }
        playListInfoStore.setPlayList(playListInfoStore.playList);
    } else {
        playListInfoStore.setPlayList();
    }
};

OK，到目前为止，本章关于歌曲播放列表的模块已经基本完成。我们可以在需要的地方引入该模块。如我们在播放条里有个播放列表，引入代码<song-list :songList="list" :typeSize="'mini'" :isScroll="true"></song-list>；

课后总结

这节我们实现了歌曲列表功能模块，下章节我们实现播放条功能。

一键三连，努力变得更强！！！