点击歌单进入歌单详情效果

效果展示:

点击后进入歌单对应的详情页:

代码步骤:

1.轮播歌单

1.新建components /musicList.vue

2.联系musicList.vue 与 HomeView.vue

在HomeView.vue 中引入配置musicList.vue

3.配置轮播图和接口

引入轮播图

<template>
    <div class="musicList">
        <div class="musicList-top">
            <div class="title">发现好歌单</div>
            <a class="more">查看更多</a>
        </div>

        <div class="mlist">
            <div class="swiper-container" id="musicSwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,i) in musics.musicList" :key="i">
                        <img :src="item.picUrl" alt="">
                        <div class="name">{{item.name}}</div>
                        <div class="count">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zanting2-copy"></use>
                            </svg>
                            <span>{{item.playCount}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {getMusic} from '@/api/index'
    import {reactive, onMounted, onUpdated} from 'vue'
    import 'swiper/css/swiper.css'
    import Swiper from 'swiper'
    export default {
        name: "musicList",
        setup() {//vue3组合api
            let musics = reactive({
                musicList: []//保存获取的歌单列表
            })
            onMounted(async () => {//view与model绑定成功之后生命周期函数
                let res = await getMusic(10)
                console.log(res.data.result)
                musics.musicList = res.data.result.slice(4, 14)
            })
            onUpdated(() => {
                var swiper = new Swiper('#musicSwiper', {
                    slidesPerView: 3,//每一屏显示几块内容
                    spaceBetween: 10//每个内容间的间距
                })
            })
            return {musics}
        }}
</script>