實現網易雲專案輪播圖滾動切換效果
阿新 • • 發佈：2022-05-10
搭建主頁面
（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;