Vue使用Swiper的案例详解
作者:Tyler 发布时间:2024-04-26 17:39:01
标签:Vue,Swiper
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
0
投稿
猜你喜欢
- 有两张表a表id val 1 a 2 b 3 c 4 d 5 e b表 a_id val 1 null 2 null 3 null 4 nu
- 一、xlsxwriter 基本用法,创建 xlsx 文件并添加数据官方文档:http://xlsxwriter.readthedocs.or
- 一、定义函数在Python中可以使用def关键字来定义函数,命名规则跟变量的命名规则是一致的。在函数名后面的圆括号中可以放置传递给函数的参数
- 简介Python Fire是谷歌开源的一个第三方库,用于从任何Python对象自动生成命令行接口(CLI),可用于如快速拓展成命令行等形式。
- mktime()方法是localtime()反函数。它的参数是struct_time或全9元组,它返回一个浮点数,为了兼容时ti
- 保留COOKIES一个小时Response.Cookies("MyCookie").Expires= (now
- 这是官方截图,mysql5.7安装后,会有一个默认密码,保存在mysql.log里面,找的他,并更改官方文档地址https://dev.my
- 为什么要手动添加核?因为使用公司的服务器,最好不要直接使用anaconda自带的python,更不要使用系统下自带的python,如果每个人
- 前言我们将利用 Beautiful Soup 模块的搜索功能,根据标签名称、标签属性、文档文本和正则表达式来搜索。搜索方法Beautiful
- 目录一、装饰器使用场景二、为什么需要装饰器1、先来看一个简单例子:2、增加需求3、又有需求三、基础装饰器入门1、装饰器语法糖2、对带参数的函
- 先说下自己之前的环境(都是Linux系统,差别不大):Centos7.6NVIDIA Driver Version 440.33.01(等会
- 实际需求中,需要对某张表某字段里面的内容进行批量替换,普通的思考流程如下:SELECT出来str_replace替换UPDATE写入实际这样
- php中-> 、=>、::、$this->四种符号在代码中很常见,使用很广泛。这篇文章主要介绍了php中-> 、=&
- 网页显示不正常,出现图片错位,文字跑远……等等,别急,试试IE8自带的”兼容性视图”功能吧!其实出现网页显示问题,一般不是您的电脑或者浏览器
- 代码中经常会有变量是否为None的判断,有三种主要的写法:第一种是`if x is None`;第二种是 `if not x:`;第三种是`
- python一直被病垢运行速度太慢,但是实际上python的执行效率并不慢,慢的是python用的解释器Cpython运行效率太差。“一行代
- 50个常用sql语句 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(
- 本文实例讲述了Python使用scrapy采集数据过程中放回下载过大页面的方法。分享给大家供大家参考。具体分析如下:添加以下代码到setti
- 在绝大多数查询中,MySQL使用哪种校对规则进行比较是很显然的。例如,在下列情况中,校对规则明显的是“列x的列校对规则”:SELECT&nb
- 公司服务器上的ip最少的也有100多个,有时候查到一个站的Ip, 不想通过OA去查,自己就用自己最近学的python知识,结合数据库,编写了