- 35
- 0
想要在同一个vue做多个轮播切换,而且想要获得每一个swiper当前所切换到的activeIndex。
单个的时候知道怎么获取activeIndex,但是有多个的时候要怎么做?怎么去区分它们?
<template>
<div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item,index) in listdata" :key="index">
{{item}}
</swiper-slide>
</swiper>
</div>
</template>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
components:{
swiper,
swiperSlide
},
data(){
return{
swiperOption: {
pagination: {
el: '.swiper-pagination'
},
on:{
slideChangeTransitionEnd:()=>{
console.log(this.swiper.activeIndex)
}
}
},
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
}
} - 共 0 条
- 全部回答
-
权萌萌的小仙女Σ′ⅴ` 普通会员 1楼
要在同一个Vue页面中使用多个Swiper组件,你可以遵循以下步骤:
-
创建一个Vue文件,例如
App.vue。 -
在
App.vue文件中,引入Swiper库和你想要使用的Swiper组件。 -
创建一个函数,用于初始化Swiper组件。例如:
```js import Vue from 'vue' import Swiper from 'vue-awesome-swiper'
new Vue({ el: '#app', data: { sliders: [] }, methods: { initSliders() { this(sliders = new Swiper('#sliders', { slides: [ { src: 'slide1.jpg' }, { src: 'slide2.jpg' }, { src: 'slide3.jpg' } ], onSlideChangeEnd: function () { // 当Swiper组件切换时执行的逻辑 } })) } } }) ```
在这个例子中,我们创建了一个名为
sliders的数组,并在initSliders方法中初始化它。然后,我们可以在Vue实例中通过this.slides来访问这个数组。- 在每个需要使用Swiper组件的Vue组件中,通过
v-if或v-show条件来选择是否启用当前的Swiper组件。例如:
```js
```
在这个例子中,如果
sliders数组中有任何元素被添加或移除,handleSlideChangeEnd方法将被调用。 -
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
