vue & swiper——实时获取当前轮播索引并赋值到data实例中

最新推荐文章于 2023-11-01 16:59:50 发布
最新推荐文章于 2023-11-01 16:59:50 发布
阅读量4.2k 收藏 5
点赞数 4
分类专栏： vue 文章标签： vue js javascript css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39347364/article/details/110653500
版权

实时获取当前轮播索引并赋值到data实例中

实现功能

swiper中，要想获取实时的当前索引，需要在onSlideChangeStart函数中获取，swiper参数中有realIndex是当前索引，把realIndex赋值给data中的currentIndex就行了

实现思路

在onSlideChangeStart函数中是获取不到data中的currentIndex的，所以要在data中把指向vue实例的this先赋值给变量_self，然后就可以在函数中获取到currentIndex，并进行赋值就可以了

实现代码

在这里插入图片描述

前端技术迷
关注
专栏目录
vue 自封装 swiper
10-14
使用vue自己封装的轮播图效果，可以任意使用！
vue中点击 swiper获取不到索引踩坑记录
vue中实现在线预览word文档
11-04 1204
给loop：true时轮播中的页面写点击事件，因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。解决如下:` <swiper v-if="mainAchievementList.length" ref="mySwiper" :options="swiperOption"> <swiper-slide v-for="(item,index)
swiper获取当前数组滑动的inex(vue)
m0_61476911的博客
12-29 4350
swiper获取当前索引
swiper获取当前页的索引值
weixin_51609337的博客
10-24 3287
this.activeIndex：就是当前页面的索引值，通过获取索引值，在该方法内实现需求。注意：需要将loop设为false。而且初始化的时候是不会执行该方法的，只有切换才能执行。有时候轮播图切换图片时，需要将其他部分也更改，但是不想写到轮播图里怎么办？这里就需要动态获取轮播图切换时的索引值，来更改其他部分的内容。
vue3 swiper获取当前activeIndex
yaoyao_mengyao的博客
09-22 4730
vue3 swiper获取当前activeIndex
swiper插件获取当前的轮播元素及索引index( loop=true）
最新发布
yizhousai0662的博客
11-01 3530
swiper插件获取当前的轮播元素及索引index
vue使用swiper.js重叠轮播组建样式
12-30
本文实例为大家分享了vue使用swiper.js重叠轮播组建样式，供大家参考，具体内容如下 <swiper class=swiper options=swiperOption> <swiper class=swiper-slide> 一起来观看 Wes Anderson的色彩回旋舞...
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
10-16
Vue-Awesome-Swiper是一个在Vue.js项目中使用的轮播组件，它基于Swiper——一个强大的移动端触摸滑动插件。它适用于各种复杂度的滑动效果，并且支持响应式设计。由于Swiper本身有多个版本，Vue-Awesome-Swiper使得在...
Vue封装Swiper实现图片轮播效果
11-26
为了保证组件的正确销毁和更新，还需要在`beforeDestroy`生命周期钩子中销毁Swiper实例，并在属性改变时更新Swiper配置。 通过以上步骤，我们就成功地在Vue项目中封装了一个基于Swiper的图片轮播组件。在实际使用时...
vue接收索引_vue-awesome-swiper获取当前页的索引
weixin_39775106的博客
12-20 3047
首说一下思路: 从swiper的dom元素中获取当前页的索引, 只要拿到当前页的索引就可以获取对应的数据做事情了. 一共两步步骤1: 在script中获取并保存swiper的索引const c_swiper = document.getElementsByClassName("swiper")步骤2: 在swiper滚动事件里从swiper的dom元素中取当前的页码.有需要也可以在其他事件中获取s...
html5应用swiper实现无缝轮播
hy3528的博客
12-12 1020
需要引入的代码 <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/swiper/v4.3.0/swiper.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximu...
vue的swiper组件使用，获取当前滑动位置activeIndex
热门推荐
风烟
04-26 1万+
使用vue版的swiper组件vue-awesome-swiper，这个是最好用的，并且api和swiper基本一致。 使用的时候需要拿到滑动之后当前的index。 要获取activeIndex这个值。 错误写法 官方文档这么写有问题，我在全局引入的时候这样根本拿不到。 正确写法 this.$refs.mySwiper.swiper 这样写才可以。 然后监听@slideChange="slid...
Vue项目中使用swiper,获取轮播的页码
m0_66722601的博客
04-23 868
Vue项目中使用swiper,获取轮播的页码
微信小程序-swiper轮播图获取index
liuyahui_0126的博客
02-11 3615
1.获取之后存入stroage  stroage的get/set使用就不多介绍了，只说一下思想，利用轮播图变化绑定事件，获取e.detail.current（即为index）2.通过url传值直接上图  获取index   -&gt;  e.detail.current  将index写入url   将url中的index读取   ...
关于vue3 使用 Swiper
qq_37554314的博客
09-28 742
vue3+swiper
swiper不生效/切换不生效，点击切换按钮activeIndex值不对应问题@令狐张豪
LingHuzh的博客
07-28 2895
swiper不生效/切换不生效，点击切换按钮activeIndex值不对应问题
vue 使用 swiper
加班可以,无偿加班不行
07-12 708
vue 中引入 swiper vue中引入swiper3
Vue使用vue-awesome-swiper实现轮播,loop模式下,前一个项目的点击事件失效
前端开发小白9527
09-11 2010
Vue使用vue-awesome-swiper实现轮播，loop模式 前一个项目点击事件失效，解放方法
如何查看swiper轮播图的参数或属性，如何获取当前页数
qq_42490671的博客
05-13 3898
一、用$refs获取轮播图组件
Vue.js封装Swiper组件实现图片轮播
- 在子组件内部，初始化Swiper实例，并根据接收到的props配置Swiper。 4. **事件监听**： - 通过监听Swiper的内置事件（如`slideChange`或`autoplayStop`等），可以将状态变化通知给父组件。 - 父组件可以通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端技术迷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值