當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换

發(fā)布時間：2025/3/19 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言

前面在首頁已經(jīng)完成今日推薦以及訪問百度API獲取數(shù)據(jù)，現(xiàn)在繼續(xù)來完善home主頁。

效果

新歌速遞

swiper實(shí)現(xiàn)輪播圖

實(shí)現(xiàn)

實(shí)現(xiàn)新歌速遞

在components下新建新歌速遞組件News_Music.vue

此頁面與今日推薦基本相同，注意修改

1.要顯示的內(nèi)容新增歌手/作者

? <div class="author">{{ item.artist_name }}</div>

2.訪問的接口的參數(shù)要修改

?? 改為type=2 熱歌榜；size=3返回3條數(shù)據(jù)

? ?varurl=this.HOST+"/v1/restserver/ting?method=baidu.ting.billboard.billList&type=2&size=3&offset=0";

3.新增歌手作者要添加樣式

? .mod-albums .gallery .card .author {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #999;font-size: 12px;line-height: 12px; }

News_Music.vue完整代碼

<template lang="html"><div class="mod-albums"><div class="hd log url"><h2>新歌速遞</h2><div>更多</div></div><div class="container"><div class="gallery"><div class="scroller"><div class="card url" v-for="(item,index) in newsMusic" :key="index"><div class="album"><img :src="item.pic_big" :alt="item.title"><div class="name">{{ item.title }}</div><div class="author">{{ item.artist_name }}</div></div></div></div></div></div></div> </template><script> export default {name:"newsMusic",data(){return{newsMusic:[]}},mounted(){var url = this.HOST+"/v1/restserver/ting?method=baidu.ting.billboard.billList&type=2&size=3&offset=0";this.$axios.get(url).then(res => {this.newsMusic = res.data.song_list}).catch(error => {console.log(error);})} } </script><style scoped>.mod-albums {background-color: #fff;padding: 10px 17px;margin-top: 10px; }.hd {display: flex;margin: 14px 0 18px 0; }.hd h2 {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;margin: 0;padding: 0;font-size: 20px; }.hd div {width: 64px;font-size: 12px;text-align: right; }.mod-albums .gallery {overflow: hidden;margin: 0 -5px; }.mod-albums .gallery .card {width: 33.3%;float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 5px 10px; }.mod-albums .gallery .card .album {position: relative; }.mod-albums .gallery .card img {width: 100%;height: auto;border: 1px solid #eee; }.mod-albums .gallery .card .name {font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 4px;line-height: 14px;max-height: 28px;margin-bottom: 2px; }.mod-albums .gallery .card .author {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #999;font-size: 12px;line-height: 12px; }</style>

在home頁面引用新歌速遞組件

引用組件

import NewsMusic from "../components/News_Music"

注冊掛載組件

export default {name:"home",components:{TodayRecommend,NewsMusic} }

顯示組件

項目根目錄下打開命令行輸入：

npm start

啟動項目，并輸入提示的url。

實(shí)現(xiàn)swiper插件輪播圖

前言

swiper

開源、免費(fèi)、強(qiáng)大的滑動插件。

swiper中文網(wǎng)

https://www.swiper.com.cn/

Swiper4中文API

https://www.swiper.com.cn/api/index.html

Vue-Awesome-Swipwe

基于Swiper、適用于Vue的輪播組件，支持服務(wù)端和單頁引用。

插件npm

https://www.npmjs.com/package/vue-awesome-swiper

在線demo

https://surmon-china.github.io/vue-awesome-swiper/

效果

場景

home.vue是仿音樂播放器的主頁面，在home界面引入了Swiper_Banner.vue這個組件用來實(shí)現(xiàn)輪播圖。

在Swiper_Banner.vue，滾動的圖片已經(jīng)寫死，放在assets下的img目錄下。

項目目錄結(jié)構(gòu)

實(shí)現(xiàn)

1.安裝vue-awesome-swiper插件

項目根目錄下打開命令行輸入：

npm install --save vue-awesome-swiper

或者

cnpm install --save vue-awesome-swiper

2.home.vue中引入Swiper_Banner.vue組件

打開home.vue

引入組件

import SwiperBanner from "../components/Swiper_Banner"

其中../表示上級目錄。

注入組件

export default {name:"home",components:{TodayRecommend,NewsMusic,SwiperBanner} }

引用組件

home.vue 完整代碼

<template lang="html"><div class=""><TodayRecommend/><NewsMusic /><SwiperBanner/></div> </template><script> import TodayRecommend from "../components/Today_Recommend" import NewsMusic from "../components/News_Music" import SwiperBanner from "../components/Swiper_Banner" export default {name:"home",components:{TodayRecommend,NewsMusic,SwiperBanner} } </script><style scoped> </style>

3.在Swiper_Banner.vue中配置輪播圖

打開輪播圖組件Swiper_Banner.vue

首先引入swiper以及swiper的樣式文件

（局部注冊：參照：https://www.npmjs.com/package/vue-awesome-swiper）

import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper'

進(jìn)行組件引入聲明

? components: {swiper,swiperSlide}

頁面添加swiper組件元素

參照：

https://www.npmjs.com/package/vue-awesome-swiper

下的SPA:

< BR><template><swiper :options="swiperOption" ref= "mySwiper" @someSwiperEvent= "callback">< BR> ??? <swiper-slide>I'm Slide1</swiper-slide><swiper-slide>I'm Slide2</swiper-slide><swiper-slide>I'm Slide 3</swiper-slide><swiper-slide>I'm Slide 4</swiper-slide><swiper-slide>I'm Slide 5</swiper-slide><swiper-slide>I'm Slide 6</swiper-slide><swiper-slide>I'm Slide 7</swiper-slide><div class="swiper-pagination"? slot= "pagination"></div><div class="swiper-button-prev" slot="button-prev"></div><div class="swiper-button-next" slot="button-next"></div><div class="swiper-scrollbar"?? slot="scrollbar"></div></swiper> </template><script>export default {name: 'carrousel',data() {return {swiperOption:{// some swiper options/callbacks// 所有的參數(shù)同 swiper 官方 api 參數(shù)// ...}}},computed: {swiper() {return this.$refs.mySwiper.swiper}},mounted() {// current swiper instance// 然后你就可以使用當(dāng)前上下文內(nèi)的swiper對象去做你想做的事了console.log('this is current swiper instance object', this.swiper)this.swiper.slideTo(3, 1000, false)}} </script>

這里只要分頁器，別的屬性不配置，

配置參數(shù)參照官方API參數(shù)：

https://www.swiper.com.cn/api/pagination/362.html

此處為：

配置swiper組件屬性

export default {data(){return{swiperOption:{pagination: {el: '.swiper-pagination',//swiper的分頁器},autoplay:{delay:1000,//間隔一秒滾動一次}//自動滾動}}},

Swiper_Banner.vue完整代碼

<template lang= "html"><div class= "banner"><swiper :options= "swiperOption"><swiper-slide><img src="../assets/img/b1.jpg" alt= ""></swiper-slide><swiper-slide><img src="../assets/img/b2.jpg" alt= ""></swiper-slide><swiper-slide><img src="../assets/img/b3.jpg" alt= ""></swiper-slide><div class="swiper-pagination"? slot= "pagination"></div></swiper></div> </template><script>import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {data(){return{swiperOption:{pagination: {el: '.swiper-pagination',//swiper的分頁器},autoplay:{delay:1000,//間隔一秒滾動一次}//自動滾動}}},components: {swiper,swiperSlide} } </script><style scoped>.banner{padding: 10px; }</style>

此部分代碼對應(yīng)分階段代碼中階段三

分階段代碼下載位置：

https://download.csdn.net/download/badao_liumang_qizhi/10846557

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vue实现仿音乐播放器5-实现今日推荐访
下一篇： Vue实现仿音乐播放器7-实现音乐榜单效