Vue项目 走马灯 Carousel Methods prev next使用
实测有效
<el-carousel
//主要片段
//ref="img"在el-carousel里!!!
ref="img"
:interval="4000"
type="card"
:autoplay="false"
direction="vertical"
>
<el-carousel-item
v-for="(item, index) in res.img.data"
:key="index"
>
<el-image fit="cover" :src="item.images"></el-image>
</el-carousel-item>
</el-carousel>
//点击实现
<div @click="this.imgdown()" ></div>
methods: {
//幻灯片向下
imgdown() {
this.$refs.img.next();
},
},
注意,在如果在el-carousel中使用methods的方法尽量不要加this直接使用方法
本文介绍了一种在Vue项目中实现走马灯效果的方法,通过使用Element UI的el-carousel组件并结合methods中的自定义函数来控制轮播图的切换。具体展示了如何利用ref属性和methods中的next方法来实现幻灯片的向下滚动。
1216

被折叠的 条评论
为什么被折叠?



