其他分享
首页 > 其他分享> > 实现网易云项目轮播图滚动切换效果

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

作者:互联网

搭建主页面

(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