Vue element plus（vue2项目之swiper.js 的使用）

swiper.js 的使用

官网 API（部署在 swiper 实例中）：https://www.swiper.com.cn/api/index.html

官网轮播图（查看源代码）：https://www.swiper.com.cn/demo/index.html

接下来介绍怎么在 vue2 里使用 swiper.js （vue2 使用 swiper5版本）

1    
    
    
、安装    


     


     


    、引入css

npm i swiper@5 // main.js // 引入 swiper.css import "swiper/css/swiper.css";

2




 




 




 


、在组件中使用：引入 js 引入 html 结构

import Swiper from swiper

html 结构：

1   

   

   

、开始先放个图片占个位置确定布局    
    
    
，再把图片换成下面的结构

2     

     

     

   、注意最外层的 class="swiper-container" 必须！且后面的 swiper 实例也要改！

<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(img,index) in bannerList" :key="index"> <img :src="img.imgUrl" /> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </div>

3




  




  




  

、最后关键是创建 swiper 实例！ 有两种方式

方式一：

如果图片已经固定（或图片url数组已经确定 ）那么直接在 mounted 函数中创建

mounted() { // 下面是普通swiper模板 new Swiper(".swiper-container", { loop: true, mousewheel: true, keyboard: true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { el: ".swiper-pagination", }, }); }

方式二：

用到 v-for 遍历图片url数组（并且该数组是在本组件中通过发请求获取的）    


     


     


    ，那么就要用到 watch + $nextTick

5.11.1 watch+$nextTick

当一个数据发生改变时




 




 




 


，此时 DOM 还没有更新   

   

   

，所以在监视属性中的 handle 函数中 写一个 $nextTick 可以实现 数据发生改变且 DOM 更新后执行代码

回到 swiper      

     

     

   ，我们在这个时候 创建 swiper 实例

bannerList：图片url数组

watch: { bannerList: { handler() { this.$nextTick(function() { new Swiper(".swiper-container", { loop: true, mousewheel: true, keyboard: true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { el: ".swiper-pagination", }, }); }) } } }, 5.11.2 修改分页器样式

1
  


  


  


、添加属性

pagination: { el: ".swiper-pagination", clickable: true, bulletClass : my-bullet, // 这个 bulletActiveClass: my-bullet-active, },

2     
     
     
  、在组件里面写 css （不要加 scope）

// 分页器样式 .my-bullet{ position: relative; display: inline-block; width: 15px; height: 15px; border-radius: 100%; background: black; opacity: 0.5; margin: 0 4px; } // 选中的分页器样式（会继承上面那个样式） .my-bullet-active { background: #ff6600; opacity: 1; } 5.11.3 封装轮播图组件

当一个图片需要变为轮播图时




  




  




  

，我们把 img 标签 换成 Carousel 组件即可！

1 




   




   




   
、Carousel 组件需要一个参数：图片 url 数组

imgList = [ {imgUrl: ...} {imgUrl: ...} ]

2

 



 



 



、将 Carousel 组件注册为全局组件

// 在 components 中新建 Carousel 文件夹 // main.js import Carousel from @/components/Carousel Vue.component(Carousel.name,Carousel)

3                、Carousel/index.vue （直接照搬即可 样式可自行修改）

<template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(img,index) in imgList" :key="index"> <img :src="img.imgUrl" /> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </div> </template> <script> import Swiper from swiper export default { name: Carousel, props: [imgList], watch: { imgList: { immediate: true, handler() { this.$nextTick(function() { new Swiper(".swiper-container", { loop: true, pagination: { el: ".swiper-pagination", clickable: true, bulletClass : my-bullet, bulletActiveClass: my-bullet-active, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); }) } } } } </script> <style lang="less"> // 分页器样式 .my-bullet{ position: relative; display: inline-block; width: 15px; height: 15px; border-radius: 100%; background: black; opacity: 0.5; margin: 0 4px; } // 选中的分页器样式（会继承上面那个样式） .my-bullet-active { background: #ff6600; opacity: 1; } </style>

4  




    




    




    、组件中使用（传入图片 url 数组即可）

<Carousel :imgList="bannerList" /> 5.11.4 swiper 属性

1

















、 <div class="swiper-container">：为轮播图大盒子

2               、<div class="swiper-slide">：为装图片的盒子
  


  


  


，可以指定大小     
     
     
  ，那么图片直接适配    
    
    
。或者不指定大小 




   




   




   
，则需要指定图片大小    


     


     


    。

3   



     



     



     、slidesPerView：设置 轮播图大盒子 显示 轮播图 张数

 



 



 



，轮播图 会被修改宽度适配 轮播图大盒子

4

















、slidesPerGroup：每次切换 轮播图 张数

5    
    
    
、给 <div class="swiper-slide"> 添加类名 swiper-no-swiping ：禁止滑动