Vue使用Swiper的案例详解
作者:Tyler 时间:2024-04-26 17:39:01
Vue使用Swiper看这一篇就够了
此案例实现需求
完成swiper动态异步数据下的slide渲染
自定义分页器样式
解决loop:true设置时的事件丢失问题
swiper鼠标移入/移出 暂停/开始轮播
单页面渲染多个swiper组件互不影响
1、引入swiper
npm i swiper@5.2.0
2、创建轮播图组件CarouselContainer.vue,详细解析在代码注释中
<template>
<div class="CarouselContainer" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
<div ref="mySwiper" class="swiper-container" :id="currentIndex" >
<div class="swiper-wrapper">
<div class="swiper-slide my-swiper-slide" v-for="(item,index) of slideList" :key="index">{{item.name}}</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
<!--导航器-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
import "swiper/css/swiper.css";
export default {
name: 'CarouselContainer',
props: ['slideList','currentIndex'],
data(){
return {
currentSwiper:null,
}
},
watch:{
//slide数据发生变化时,更新swiper
slideList:{
deep:true,
// eslint-disable-next-line
handler(nv,ov){
console.log("数据更新了")
this.updateSwiper()
}
}
},
mounted() {
this.initSwiper()
},
methods:{
//鼠标移入暂停自动播放
stopAutoPlay() {
this.currentSwiper.autoplay.stop()
},
//鼠标移出开始自动播放
startAutoPlay() {
this.currentSwiper.autoplay.start()
},
//初始化swiper
initSwiper(){
// eslint-disable-next-line
let vueComponent=this//获取vue组件实例
//一个页面有多个swiper实例时,为了不互相影响,绑定容器用不同值或变量绑定
this.currentSwiper = new Swiper('#'+this.currentIndex, {
loop: true, // 循环模式选项
autoHeight:'true',//开启自适应高度,容器高度由slide高度决定
//分页器
pagination: {
el: '.swiper-pagination',
clickable:true,//分页器按钮可点击
},
on: {
//此处this为swiper实例
//切换结束获取slide真实下标
slideChangeTransitionEnd: function(){
console.log(vueComponent.$props.currentIndex+"号swiper实例真实下标",this.realIndex)
},
//绑定点击事件,解决loop:true时事件丢失
// eslint-disable-next-line
click: function(event){
console.log("你点击了"+vueComponent.$props.currentIndex+"号swiper组件")
}
},
//导航器
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
//自动播放,不同版本配置方式不同
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
slidesPerView: 1, //视口展示slide数1
slidesPerGroup: 1, //slide数1页一组
})
},
//销毁swiper
destroySwiper(){
try {
this.currentSwiper.destroy(true,false)
}catch (e) {
console.log("删除轮播")
}
},
//更新swiper
updateSwiper(){
this.destroySwiper()
this.$nextTick(()=>{
this.initSwiper()
})
},
},
destroyed() {
this.destroySwiper()
}
}
</script>
<style scoped>
.CarouselContainer{
background-color: gray;
}
/*slide样式*/
.my-swiper-slide{
height: 300px;
background-color: pink;
}
/*swiper容器样式*/
.swiper-container {
width: 700px;
border: 1px solid red;
}
/*自定义分页器按钮被点击选中时的样式*/
/deep/.swiper-pagination-bullet-active{
background-color: #d5a72f !important;
width: 20px;
}
/*自定义分页器按钮常规样式*/
/deep/.swiper-pagination-bullet{
background-color: #9624bf;
opacity: 1;
width: 20px;
}
</style>
3、创建父组件App.vue渲染多个swiper组件、模拟异步数据变化
<template>
<div id="app">
<!--传递不同的currentIndex 作为区分不同swiper组件的动态id-->
<CarouselContainer :slide-list="list" currentIndex="1"></CarouselContainer>
<CarouselContainer :slide-list="list" currentIndex="2"></CarouselContainer>
</div>
</template>
<script>
import CarouselContainer from './components/CarouselContainer.vue'
export default {
name: 'App',
components: {
CarouselContainer,
},
data(){
return{
list:[
{name:"aaa"},
{name:"bbb"},
{name:"ccc"},
]
}
},
mounted() {
let self=this
//延时模拟两次数据变化
setTimeout(()=>{
let obj={name:"ddd"}
self.list.push(obj)
},5000)
setTimeout(()=>{
let obj={name:"eee"}
self.list[0].name="AAA"
self.list.push(obj)
},8000)
}
}
</script>
<style scoped>
</style>
只需要这两个文件就可以vue项目中运行demo查看效果了
来源:https://blog.csdn.net/qq_43137699/article/details/125375095
标签:Vue,Swiper


猜你喜欢
Go1.18新特性之泛型使用三步曲(小结)
2024-05-03 15:05:52
JS二维数组的定义说明
2023-08-23 15:09:45
windows中安装Python3.8.0的实现方法
2022-11-22 00:18:09

Python Opencv实战之文字检测OCR
2023-03-18 14:05:41

Python如何实现大型数组运算(使用NumPy)
2023-05-11 21:49:05
改变 Python 中线程执行顺序的方法
2022-01-14 16:11:10

python 爬取华为应用市场评论
2023-08-31 23:18:32

Anaconda安装以及修改环境默认位置图文教程
2021-12-27 08:52:01

Pytorch实现常用乘法算子TensorRT的示例代码
2021-08-17 17:49:47
Sql Server 视图数据的增删改查教程
2024-01-22 07:51:05

10分钟带你上手Vue3中新增的API
2024-06-05 10:03:00
如何实现上下翻页?
2010-05-24 18:29:00
django创建超级用户时指定添加其它字段方式
2022-08-13 17:24:18
Dreamweaver量身打造Wordpress留言板
2009-12-09 17:08:00

php json_encode与json_decode详解及实例
2023-07-04 22:46:27
Mysql中的事务是什么如何使用
2024-01-21 18:42:26
python3+requests接口自动化session操作方法
2022-09-22 19:30:40
python利用scatter绘画散点图
2021-02-02 01:45:37

如何将自己写的模块上传到pypi
2022-06-19 10:47:06

详解MySQL索引原理以及优化
2024-01-16 18:18:25
