实现网易云项目轮播图滚动切换效果
作者：互联网
搭建主页面
（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}`
//用的时飘号即模板字符串解析变量
}
标签：网易,vue,滚动,轮播,js,musicList,rem,type,swiper 来源： https://www.cnblogs.com/0214wwd/p/16255424.html