前言

前面在首页已经完成今日推荐以及访问百度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-swiper

2.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

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

Vue实现仿音乐播放器项目总述以及阶段目录
Github地址 https://github.com/badaoliumang/vuemusicplayer Vue实现仿音乐播放器各阶段代码 https://download.csdn.net/d ...
Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目 1.登录github,点击右上角新建仓库 2.输入仓库名以及描述等,点击Create resposity 3.新建仓库完成后,右边有个clone or download,复制SS ...
vue 判断同一数组内的值是否一直_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
后端实体类接收数组_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目...
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
Vue实现仿音乐播放器14-实现搜索页面以及功能
效果实现百度音乐搜索API说明例:method=baidu.ting.search.catalogSug&query=海阔天空参数:query = " //搜索关键字搜索页 ...
Vue实现仿音乐播放器11-实现访问百度音乐API实现播放音乐功能
场景从今日推荐页面点击某首歌曲会将这首歌曲的songid通过路由传递到播放界面, 播放界面调用百度音乐接口实现数据的获取以及音乐的播放. 效果实现配置路由首先在pages目录下新建musicp ...
Vue实现仿音乐播放器7-实现音乐榜单效果
效果实现实现导航组件首先在pages目录下新建musiclist目录,然后在其下新建导航组件music_listnav.vue <template lang="html" ...
Vue实现仿音乐播放器13-实现音乐榜单跳转显以及播放效果
效果实现百度音乐获取列表API说明例:method=baidu.ting.billboard.billList&type=1&size=10&offset=0 参数: t ...

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

前言

效果