实现网易云项目轮播图滚动切换效果

本文主要是介绍实现网易云项目轮播图滚动切换效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

搭建主页面

（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}`  
    //用的时飘号即模板字符串解析变量
}

这篇关于实现网易云项目轮播图滚动切换效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！