我用走马灯的card类型搭配v-for做轮播图,只想给当时的主图下面显示name(card类型会显示3张图片,中间显示的是主图,会的应该秒懂),我不想通过click事件获取index(我知道click肯定的获取),我现在是想在走马灯自身轮播效果时,动态获取index只显示当时index的item.name
我用了什么ref 走马灯的change事件都不行,自身change事件好像只能获取第一次的值,之后就是undefine
<el-carousel :interval="4000" type="card" height="200px" @change="changeBanner">
<el-carousel-item v-for="item in 6" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
methods: {
changeBanner (e) {
console.log(e) // e打印出来就是索引
}
}
change事件是可以的,可以参考楼上代码
onchange会返还 两个数据 新value、及旧value
三个解决思路
1、自己down下来代码,按照你的需求改写一下onchange方法
2、利用key值每次onchange时给 key++ 实现每次都刷新key实现一个新的 caousel 轮播图,设置默认值,从而在从onchange中抓初始值 但不确定会不会有动画延迟问题你可以试试,
3、自己定义一个 setInterval 实现手动轮播 利用setActiveItem切换(name) 毕竟所有的name值你都是可以抓到的,每个对应的数据 根据循环抓索引,轮播到了那个 你自己也可以抓取到,然后实现对应的效果也不难