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

向右看齐 2023-10-18 12:31 12阅读 0赞

### 前言 ###

前面在首页已经完成今日推荐以及访问百度API获取数据，现在继续来完善home主页。

### 效果 ###

### 新歌速递 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### swiper实现轮播图 ###

![Image 1][]![20181212215447469.gif][]

## 实现 ##

### 实现新歌速递 ###

#### 在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
        }
    }

显示组件

项目根目录下打开命令行输入：

npm start

启动项目，并输入提示的url。

### 实现swiper插件轮播图 ###

### 前言 ###

#### swiper ####

开源、免费、强大的滑动插件。

swiper中文网

[https://www.swiper.com.cn/][https_www.swiper.com.cn]

Swiper4中文API

[https://www.swiper.com.cn/api/index.html][https_www.swiper.com.cn_api_index.html]

#### Vue-Awesome-Swipwe ####

基于Swiper、适用于Vue的轮播组件，支持服务端和单页引用。

插件npm

[https://www.npmjs.com/package/vue-awesome-swiper][https_www.npmjs.com_package_vue-awesome-swiper]

在线demo

[https://surmon-china.github.io/vue-awesome-swiper/][https_surmon-china.github.io_vue-awesome-swiper]

### 效果 ###

![Image 1][]![2018121221561325.gif][]

### 场景 ###

home.vue是仿音乐播放器的主页面，在home界面引入了Swiper\_Banner.vue这个组件用来实现轮播图。

在Swiper\_Banner.vue，滚动的图片已经写死，放在assets下的img目录下。

项目目录结构

![Image 1][]![2018121221561886.jpg][]

## 实现 ##

### 1.安装vue-awesome-swiper插件 ###

项目根目录下打开命令行输入：

npm install --save vue-awesome-swiper

或者

cnpm install --save vue-awesome-swiper

![Image 1][]

### 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][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][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
              // 所有的参数同 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][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>

此部分代码对应分阶段代码中阶段三

分阶段代码下载位置：

[https://download.csdn.net/download/badao\_liumang\_qizhi/10846557][https_download.csdn.net_download_badao_liumang_qizhi_10846557]

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181212215436286.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20181212215447469.gif]: https://img-blog.csdnimg.cn/20181212215447469.gif
[https_www.swiper.com.cn]: https://www.swiper.com.cn/
[https_www.swiper.com.cn_api_index.html]: https://www.swiper.com.cn/api/index.html
[https_www.npmjs.com_package_vue-awesome-swiper]: https://www.npmjs.com/package/vue-awesome-swiper
[https_surmon-china.github.io_vue-awesome-swiper]: https://surmon-china.github.io/vue-awesome-swiper/
[2018121221561325.gif]: https://img-blog.csdnimg.cn/2018121221561325.gif
[2018121221561886.jpg]: https://img-blog.csdnimg.cn/2018121221561886.jpg
[https_www.swiper.com.cn_api_pagination_362.html]: https://www.swiper.com.cn/api/pagination/362.html
[https_download.csdn.net_download_badao_liumang_qizhi_10846557]: https://download.csdn.net/download/badao_liumang_qizhi/10846557