标签：网易 vue 滚动 轮播 js musicList rem type swiper
搭建主页面
（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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。