Ant-Design-Vue走马灯自定义next() prev()goTo()切换按钮
内容区域:加一个ref=“varousel”,任意取<a-carousel class="varousel" ref="varousel"><div><h3>1</h3></div><div><h3>2</h3></div>...
·
内容区域:加一个ref=“varousel”,任意取
<a-carousel class="varousel" ref="varousel">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</a-carousel>
按钮区域:在每个按钮加上点击事件
<div class="btn-box">
<div class="title">小车路径</div>
<input @click="goTo(1)" type="button" value="车1" />
<input @click="next()" type="button" value="车2" />
<input @click="prev()" type="button" value="车3" />
<input @click="goTo(4)" type="button" value="车4" />
</div>
定义goTo方法:varousel跟上面ref的值保持一致
goTo(index){
this.$refs.varousel.goTo(index-1);
}
定义next方法:
next(){
this.$ref.varousel.next();
}
定义prev方法:
prev(){
this.$ref.varousel.prev();
}
更多推荐
已为社区贡献3条内容
所有评论(0)