(1)清空views文件夹内的VUE项目,并且新建HomeView.vue文件。
(2)在components内新建四个vue文件
分别是:swiperCom、topNav、musicList、iconList
(3)在public 下建立js ,js内建立rem.js 将rem.js 文件内容粘贴进来
(4)topNav 对应发现页的顶部导航栏 分成左中右三个部分 使用vue子内部css
(5) 引入阿里巴巴矢量图标 (阿里巴巴矢量图标网站 https://www.iconfont.cn/ ) 在 public内的index.html title后引入阿里巴巴矢量图标
<script src="//at.alicdn.com/t/font_2116323_2uzmlhod9n5.js"></script>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2116323_wrykyjzwea.css">
topNav.vue内
<div class="topLeft"> <svg class="icon" aria-hidden="true"> <!--阿里巴巴矢量图标--> <use xlink:href="#icon-liebiao"</use> <!--阿里巴巴矢量图标 只改 liebiao就可以--> </svg> </div>
(6)解决右侧放大镜溢出屏幕的问题
app.vue
<style lang="less"> *{ margin: 0; padding: 0; box-sizing: border-box; font-family:'微软雅黑'; } </style>
(7)在 public 内的index.html里加script,
效果: 放大或缩小,里面的内容会随之改变
<script src="<%= BASE_URL %>js/rem.js"></script>//
(8) 轮播图部分 套用 swiper插件
右键music打开终端
npm i swiper vue-awesome-swiper --save npm i swiper@5 --save
引入swiper框架 swiperCom.vue:
<script> import 'swiper/css/swiper.css' //引入css import Swiper from 'swiper'; // 引入框架 export default { name: "swiperCom", data(){ return{ imgs:[ {pic:require('../assets/img/swiper1.jpg')}, {pic:require('../assets/img/swiper2.jpg')}, {pic:require('../assets/img/swiper3.png')} ] } } } </script>
轮播图的for循环 swiperCom.vue:
<template> <div class="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> </div> </template>
引入轮播图接口
1.在src内建立api文件夹 api内建立index.js,在assets内把img放进来
在api/index.js中
import axios from 'axios'//引入阿贾克斯
let baseUrl = 'http://localhost:3000/'; // 基准url
创建 new swiper实例对象 ,与DOM进行链接
mounted(){ var mySwiper=new Swiper('#swiperIndex',{ //配置分页器内容 pagination:{ el:".swiper-pagination", //分页器与哪个标签相关联 clickable:true //分页器是否可以点击 } }) }
获取轮播图的api, /banner?type=2 封装这个接口使得管理便方便
export function getBanner(type=0){ // type=0设置默认值 代表 pc端 0: pc //3: ipad //2: iphone //1: android return axios.get(`${baseUrl}/banner?type=${type}`) // 注意 这个`${baseUrl}/banner?type=${type}` 用的时飘号即模板字符串解析变量 不是单引号! 注意 }
引入接口的高级方式
Ⅰ、musicList.vue:
<template> <div> <div class="swiper-slide" v-for="(item,i) in musics.musicList" :key="i"> </div> </template> <script> import {getMusic} from '@/api/index.js' import {reactive,onMounted}from 'vue'; export default { name: "musicList", setup(){ let musics= reactive({ musicList:[] }); //发送ajiak请求数据 onMounted( async function () { // view与model绑定之后的生命周期函数 let res = await getMusic(); musics.musicList = res.data.result; }) return{musics} } } </script>
api/index.js 接口文件
export function getMusic(){ //type=0设置默认值 代表 pc端 //0: pc 3: ipad //2: iphone , //1: android return axios.get(`${baseUrl}/personalized?limit=6`) // 注意 这个`${baseUrl}/banner?type=${type}` //用的时飘号即模板字符串解析变量 }
eg:
//获取轮播图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}`) } //发现歌单的api, /personalized?limit=10 limit: 获取歌单的数量 export function getMusic(limit=10) { return axios.get(`${baseUrl}/personalized?limit=${limit}`) }
(9)滑块功能的循环实现
Ⅰ、musicList.vue 循环出图片和文字
<template> <div class="musicList"> <div class="musicList-top"> <div class="title">发现好歌单</div> <div class="more">查看更多</div> </div> <!--滑块功能的实现--> <div class="mlist"> <div class="swiper-container" id="musicSwiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,i) in musics.musicList" :key="i"> <img :src="item.picUrl" alt=""> </div> </div> </div> </div> </div> </template> <script> import 'swiper/css/swiper.css'//引入 import Swiper from 'swiper'//引入 import {getMusic} from '@/api/index.js' import {reactive,onMounted,onUpdated}from 'vue'; export default { name: "musicList", setup(){//vue3的组合API let musics= reactive({ musicList:[]//保存获取的歌单列表 }); //发送ajiak请求数据 onMounted( async function () { // view与model绑定之后的生命周期函数 let res = await getMusic(); musics.musicList = res.data.result; }); //在拿到musics拿到数据之后执行滑块功能 onUpdated(function () { //view 或者model发生改变后 出发的生命周期函数 var swiper=new Swiper('#musicSwiper',{ // 跟#musicSwiper那个关联 slidesPerView:3, // 每一屏显示几块滑块内容 spaceBetween:10,//滑块之间间距 }) }) return{musics} } } </script> <style lang="less" scoped> .musicList{ width: 7.5rem; padding: 0 0.4rem; .musicList-top{ display: flex; justify-content: space-between; height: 1rem; align-items: center; .title{ font-size: 0.4rem; font-weight: 900; } .more{ border: 1px solid #ccc; border-radius: 0.2rem; font-size: 0.24rem; height: 0.5rem; width: 1.2rem; text-align: center; line-height: 0.5rem; } } .mlist{ .swiper-container{ width: 100%; height: 3rem; .swiper-slide{ display: flex; flex-direction: column; position: relative; img{ width:100%; height: auto; border-radius: 0.1rem; } .name{ height: 0.6rem; width: 100%; font-size: 0.24rem; line-height: 0.4rem; } .count{ position:absolute; right: 0.1rem; top: 0.1rem; font-size: 0.24rem; color: #ccc; display: flex; align-items: center; .icon{ fill: #ccc; } } } } } } </style>
接口文件的循环输出
export function getMusic(){ //type=0设置默认值 代表 pc端 //0: pc 3: ipad //2: iphone , //1: android return axios.get(`${baseUrl}/personalized?limit=6`) // 注意 `${baseUrl}/banner?type=${type}` //用的时飘号即模板字符串解析变量 }