vue2项目之swiper.js 的使用
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
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
禁止滑动
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |