Vue音乐页面导航栏与轮播图的配置

发现页面

建立HomeView.vue与App.vue间的联系:

在router/index .js 下

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

 

<template>
  <router-view/>
</template>

<style lang="less">
 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: '微软雅黑';
 }
  .icon{
    width: 0.3rem;
    height: 0.3rem;
  }
</style>

 

分块制作发现页面:

导航栏

 

 

1.新建components / topNav.vue

2.联系topNav.vue 与 HomeView.vue

在HomeView.vue 中引入配置topNav.vue

<template>
    <div class="home">
        <toNav></toNav>
    </div>
</template>

<script>
    import topNav from "@/components/topNav.vue";

    export default {
        name: 'HomeView',
        components: {
            topNav
        }
    }
</script>

3.在topNav.vue中布置页面内容

<template>
    <div class="topNav">
        <div class="topLeft">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-lb"></use>
            </svg>
        </div>
        <div class="topCenter">
            <span class="navBtn">我的</span>
            <span class="navBtn active">发现</span>
            <span class="navBtn">云村</span>
            <span class="navBtn">视频</span>
        </div>
        <div class="topRight">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TopNav"
    }
</script>

<style lang="less" scoped>
    .topNav {
        width: 7.5rem;
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.2rem;

        .icon {
            width: 0.5rem;
            height: 0.5rem;
        }

        .search {
            width: 0.45rem;
            height: 0.45rem;
        }

        .topCenter {
            width: 4.5rem;
            display: flex;
            justify-content: space-around;

            .active {
                font-weight: 900;
            }
        }

    }
</style>

注意:引入矢量图

在public / index.html title下中引入

<script src="//at.alicdn.com/t/font_3349404_tp1aq4cfulk.js"></script>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2116323_wrykyjzwea.css">

在页面使用:

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-lb"></use>
</svg>
icon-lb:改为所需图片代码

轮播图

 

 

1.新建components / swiperCom.vue

2.联系swiperCom.vue 与 HomeView.vue

在HomeView.vue 中引入配置swiperCom.vue

引入安装轮播图

<!--        在music003中安装轮播图安装包-->
<!--        npm i swiper vue-awesome-swiper --save   -->
<!--        npm i swiper@5 --save -->

<template>
    <div id="swipercom">
        <div class="swiper-container" id="swiperIndex">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
                    <img :src="item.pic" alt="">
                </div>
            </div>
            <!--分页器-->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>

<script>
    // 引入轮播图
    import 'swiper/css/swiper.css'
    import Swiper from 'swiper

    export default {
        name: "swiperCom",
        data() {
            return {
                imgs: [{}, {}, {}]
            }
        }
    }
</script>

 

接口封装

在src 下新建api文件夹,放入 index.js

从http://localhost:3000/ 网易云API中找到接口

//接口封装
import axios from 'axios'

let baseUrl='http://localhost:3000'

//获取轮播图api /banner?type=2 type:资源类型,对应以下类型:
//0:pc
//1:android
//2:iphone
// 3:i pad
export function getBanner(type=0) {
    // ``飘号可以解析变量baseUrl
    //模板字符串
    return axios.get(`${baseUrl}/banner?type=${type}`)
}

import {getBanner} from '@/api/index'

 async created() {
            let res = await getBanner(1)
            this.imgs = res.data.banners.slice(2,5)
        },
        mounted() {
            //发送ajax,调用请求轮播图图片的函数,拿到数据
            // let res = await getBanner(1)
            // this.imgs = res.data.banners.slice(2,5)
            var mySwiper = new Swiper('#swiperIndex', {
                // 分页器
                pagination: {
                  el: ".swiper-pagination",//分页器与那个标签关联
                    clickable: true//分页器是否可以点击
                }
            })}