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数据发生变化时,更新swiperslideList:{deep:true,// eslint-disable-next-linehandler(nv,ov){console.log("数据更新了")this.updateSwiper()}}},mounted() {this.initSwiper()},methods:{//鼠标移入暂停自动播放stopAutoPlay() {this.currentSwiper.autoplay.stop()},//鼠标移出开始自动播放startAutoPlay() {this.currentSwiper.autoplay.start()},//初始化swiperinitSwiper(){// eslint-disable-next-linelet 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-lineclick: 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数1slidesPerGroup: 1, //slide数1页一组})},//销毁swiperdestroySwiper(){try {this.currentSwiper.destroy(true,false)}catch (e) {console.log("删除轮播")}},//更新swiperupdateSwiper(){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查看效果了

Vue使用Swiper看这一篇就够了相关推荐

api网关选型_如何轻松打造百亿流量API网关？看这一篇就够了（下）
如何轻松打造百亿流量API网关?看这一篇就够了(上) 上篇整体描述了网关的背景,涉及职能.分类.定位环节,本篇进入本文的重点,将会具体谈下百亿级流量API网关的演进过程. 准备好瓜子花生小板凳开始积累 ...
python装饰器功能是冒泡排序怎么做_传说中Python最难理解的点|看这完篇就够了(装饰器)...
https://mp.weixin.qq.com/s/B6pEZLrayqzJfMtLqiAfpQ 1.什么是装饰器网上有人是这么评价装饰器的,我觉得写的很有趣,比喻的很形象每个人都有的内裤主要是 ...
serviceloader java_【java编程】ServiceLoader使用看这一篇就够了
转载:https://www.jianshu.com/p/7601ba434ff4 想必大家多多少少听过spi,具体的解释我就不多说了.但是它具体是怎么实现的呢?它的原理是什么呢?下面我就围绕这两个问 ...
docker 删除所有镜像_关于 Docker 镜像的操作，看完这篇就够啦 !（下）| 文末福利...
紧接着上篇<关于 Docker 镜像的操作,看完这篇就够啦 !(上)>,奉上下篇 !!! 镜像作为 Docker 三大核心概念中最重要的一个关键词,它有很多操作,是您想学习容器技术不得不掌 ...
mysql ip比较大小_MySQL优化/面试，看这一篇就够了
原文链接:http://www.zhenganwen.top/articles/2018/12/25/1565048860202.html 作者:Anwen~ 链接:https://www.nowco ...
基础 | 零散的MySql基础记不住，看这一篇就够啦
❝ 这是小小本周的第二篇,本篇将会着重的讲解关于MySql基础的内容,MySql基础看这一篇就够啦. ❞ 送书反馈与继续送书之情小微信公众号第一次送书,Java深度调试技术,书已经被中奖者麦洛签收, ...
【系统架构设计师】软考高级职称，一次通过，倾尽所有，看完这篇就够了，论软件架构设计的重要性、本篇论文“未通过考试”，供分析参考
[系统架构设计师]软考高级职称,一次通过,倾尽所有,看完这篇就够了,学习方法和技巧这里全都有. 论软件架构设计的重要性.本篇论文未通过考试(不合格),供分析参考. 目录摘要正文结尾摘要 201 ...
深度好文：云网络丢包故障定位，看这一篇就够了~
深度好文:云网络丢包故障定位,看这一篇就够了~ https://mp.weixin.qq.com/s/-Q1AkxUr9xzGKwUMV-FQhQ Alex 高效运维今天来源:本文经授权转自公众号 ...
代理后台中间件_Golang Gin 实战（十三）| 中间件详解看这一篇就够了
6000字大章带你死磕Golang Gin中间件在Gin的整个实现中,中间件可谓是Gin的精髓.一个个中间件组成一条中间件链,对HTTP Request请求进行拦截处理,实现了代码的解耦和分离,并且 ...

Vue使用Swiper看这一篇就够了

Vue使用Swiper看这一篇就够了

Vue使用Swiper看这一篇就够了相关推荐

最新文章

热门文章