Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
生活随笔
收集整理的這篇文章主要介紹了
Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
前面在首頁已經完成今日推薦以及訪問百度API獲取數據，現在繼續來完善home主頁。
效果
新歌速遞
swiper實現輪播圖
?
實現
實現新歌速遞
在components下新建新歌速遞組件News_Music.vue
此頁面與今日推薦基本相同，注意修改
1.要顯示的內容新增歌手/作者
? <div class="author">{{ item.artist_name }}</div>2.訪問的接口的參數要修改
?? 改為type=2 熱歌榜；size=3返回3條數據
? ?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} }顯示組件
<template lang="html"><div class=""><TodayRecommend/><NewsMusic /></div> </template>項目根目錄下打開命令行輸入：
npm start啟動項目，并輸入提示的url。
實現swiper插件輪播圖
前言
swiper
開源、免費、強大的滑動插件。
swiper中文網
https://www.swiper.com.cn/
Swiper4中文API
https://www.swiper.com.cn/api/index.html
Vue-Awesome-Swipwe
基于Swiper、適用于Vue的輪播組件，支持服務端和單頁引用。
插件npm
https://www.npmjs.com/package/vue-awesome-swiper
在線demo
https://surmon-china.github.io/vue-awesome-swiper/
效果
場景
home.vue是仿音樂播放器的主頁面，在home界面引入了Swiper_Banner.vue這個組件用來實現輪播圖。
在Swiper_Banner.vue，滾動的圖片已經寫死，放在assets下的img目錄下。
項目目錄結構
實現
1.安裝vue-awesome-swiper插件
項目根目錄下打開命令行輸入：
npm install --save vue-awesome-swiper或者
cnpm install --save vue-awesome-swiper2.home.vue中引入Swiper_Banner.vue組件
打開home.vue
引入組件
import SwiperBanner from "../components/Swiper_Banner"其中../表示上級目錄。
注入組件
export default {name:"home",components:{TodayRecommend,NewsMusic,SwiperBanner} }引用組件
<template lang="html"><div class=""><TodayRecommend/><NewsMusic /><SwiperBanner/></div> </template>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'進行組件引入聲明
? components: {swiper,swiperSlide}頁面添加swiper組件元素
參照：
https://www.npmjs.com/package/vue-awesome-swiper
下的SPA:
<!-- The ref attr used to find the swiper instance-->< BR><template><swiper :options="swiperOption" ref= "mySwiper" @someSwiperEvent= "callback">< BR> ??? <!-- slides--><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><!-- Optional controls --><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// 所有的參數同 swiper 官方 api 參數// ...}}},computed: {swiper() {return this.$refs.mySwiper.swiper}},mounted() {// current swiper instance// 然后你就可以使用當前上下文內的swiper對象去做你想做的事了console.log('this is current swiper instance object', this.swiper)this.swiper.slideTo(3, 1000, false)}} </script>這里只要分頁器，別的屬性不配置，
配置參數參照官方API參數：
https://www.swiper.com.cn/api/pagination/362.html
此處為：
<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>配置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>此部分代碼對應分階段代碼中階段三
分階段代碼下載位置：
https://download.csdn.net/download/badao_liumang_qizhi/10846557
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue实现仿音乐播放器5-实现今日推荐访
- 下一篇： Vue实现仿音乐播放器7-实现音乐榜单效