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.cssimport "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.jsimport Carousel from '@/components/Carousel'Vue.component(Carousel.name,Carousel)

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

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",},});})}}}}// 分页器样式.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;}

4、组件中使用(传入图片 url 数组即可)

5.11.4 swiper 属性

1、 :为轮播图大盒子

2、:为装图片的盒子,可以指定大小,那么图片直接适配。或者不指定大小,则需要指定图片大小。

3、slidesPerView:设置 轮播图大盒子 显示 轮播图 张数,轮播图 会被修改宽度适配 轮播图大盒子

4、slidesPerGroup:每次切换 轮播图 张数

5、给 添加类名 swiper-no-swiping :禁止滑动