【我在做毕设】音乐海报轮播

用户4793865

发布于 2023-01-12 13:55:21

5350

发布于 2023-01-12 13:55:21

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

首先看一下我们最后的效果。除了展示海报还需要相应的跳转。

提前准备

vue3
网易云接口API 一个大佬写的 原理是模拟登录去网易云音乐发起请求。网址源码地址
网易云音乐官网

elementPlus 走马灯组件

添加走马灯

我选择了这种卡片化的走马灯效果

将其代码复制到我们的项目中

:interval 是轮播的切换的时间间隔这里是4000ms
默认是自动切换的如果想要不是自动切换可以修改autoplay属性为false
height轮播内容的高度
这里是循环了六个，我们稍后会改成我们读取接口的数据。

<template>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

复制代码

进行一些样式的修改，给最外层报包了一个divbanner，让他的高度比轮播的内容高一些。同时也给我们轮播加了一个 img_con 让其有圆角。

<template>
  <div class='banner'>
    <el-carousel :interval="4000" type="card" height="300px">
   <el-carousel-item v-for="item in 6" :key="item" class="img_con"> <h3>{{ item }}</h3> </el-carousel-item>
  </el-carousel>
  </div>
</template>

<script lang="ts" setup>

</script>

<style scoped lang="scss">
.banner {
    height: 320px;
    padding:0px 30px;
  
}
.img_con{
    // border:2px solid #ffff !important;
    border-radius:10px;
}
 .img {
        border: 10px solid red($color: #000000) !important;
    }
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

请求接口渲染数据

用到的接口

如下：/banner接口。我们是pc端其实可以不传任何参数，因为默认0就是pc端

封装的请求api

为了跨域我用api进行了proxy的处理。然后baseUrl在我们封装的request.ts文件中(指向本地后端的地址)。

// 首页轮播图
export const getBanner = () =>
  request({
    method: 'GET',
    // 这里会和我们request.ts中的baseUrl进行拼接。这个 / 写不写都可以。 因为他有一个多退少补机制
    url: '/api/banner',
  });

这里是vue3的setup语法糖写法，所以变量、方法都写到内部即可。使用ref让数据成为响应式数据。经过ref处理的响应式数据的值在其value属性中，所以赋值时需要 bannerList.value

<script lang="ts" setup>
import {getBanner} from '@/api/clientIndex';
import { ref } from 'vue';
let bannerList = ref([])
getBanner().then((res)=>{
    bannerList.value = res?.data.banners
})

</script>

渲染轮播

如下的接口中的imgUrl就是海报图片的网址

将轮播的内容替换

使用 el-image 组件去显示轮播的图片 fit='fill'

  <el-carousel :interval="4000" type="card" height="300px">
    <el-carousel-item v-for="(item,index) in bannerList" :key="index" class="img_con">
        <el-image :src="item.imageUrl" fit='fill' class="img" />
    </el-carousel-item>
  </el-carousel>

实现后那还有一个问题：跳转到图片对应的页面。

跳转

看下一网易云的跳转

他跳转的路径是不同的。

实际上 /banner返回值中的 targetType区分了它跳转的不同路径

targetType  1 : 单曲
            10 ： 专辑
            1000：歌单
            1004 ： MV
            3000 ： 购买链接

添加跳转函数

 <el-carousel-item v-for="(item,index) in bannerList" :key="index" class="img_con" @click="pathHandler(item)">
  
        <el-image :src="item.imageUrl" fit='fill' class="img" />
        
    </el-carousel-item>

这里还用到了路由跳转的Hook 需要引入一下

import { useRouter } from 'vue-router';
const router = useRouter()

通过switch case判断不同的跳转这里的跳转页面我们还没有写好后续完成。

const  pathHandler = (params:any)=>{
  console.log(params.targetId,'paramsparams')
            switch (params.targetType) {
                case 1: // 单曲
                    router.push({ path: '/song', query: { id: params.targetId } })
                    break
                case 10: // 专辑
                    router.push({ path: '/album', query: { id: params.targetId } })
                    break
                case 1000: // 歌单
                    router.push({ path: '/playlist', query: { id: params.targetId } })
                    break
                case 1004: // MV
                    router.push({ path: '/mv', query: { id: params.targetId } })
                    break
                case 3000: // 外链
                    window.open(params.url, '_blank')
                    break
            }
        }

完整代码

<template>
  <div class='banner'>
    <el-carousel :interval="4000" type="card" height="300px">
    <el-carousel-item v-for="(item,index) in bannerList" :key="index" class="img_con" @click="pathHandler(item)">
  
        <el-image :src="item.imageUrl" fit='fill' class="img" />
        
    </el-carousel-item>
  </el-carousel>
  </div>
</template>

<script lang="ts" setup>
import {getBanner} from '@/api/clientIndex';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
let bannerList = ref([])
getBanner().then((res)=>{
    bannerList.value = res?.data.banners
})
const  pathHandler = (params:any)=>{
  console.log(params.targetId,'paramsparams')
            switch (params.targetType) {
                case 1: // 单曲
                    router.push({ path: '/song', query: { id: params.targetId } })
                    break
                case 10: // 专辑
                    router.push({ path: '/album', query: { id: params.targetId } })
                    break
                case 1000: // 歌单
                    router.push({ path: '/playlist', query: { id: params.targetId } })
                    break
                case 1004: // MV
                    router.push({ path: '/mv', query: { id: params.targetId } })
                    break
                case 3000: // 外链
                    window.open(params.url, '_blank')
                    break
            }
        }
</script>

<style scoped lang="scss">
.banner {
    height: 320px;
    padding:0px 30px;
  
}
.img_con{
    // border:2px solid #ffff !important;
    border-radius:10px;
}
 .img {
        border: 10px solid red($color: #000000) !important;
    }
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-18，如有侵权请联系 cloudcommunity@tencent.com 删除

api

渲染

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

api

渲染

登录后参与评论

0 条评论

热度