账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue-awesome-swiper怎么在同一个Vue页面使用多个swiper?
    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
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 要在同一个Vue页面中使用多个Swiper组件,你可以遵循以下步骤:

      1. 创建一个Vue文件,例如App.vue

      2. App.vue文件中,引入Swiper库和你想要使用的Swiper组件。

      3. 创建一个函数,用于初始化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来访问这个数组。

      1. 在每个需要使用Swiper组件的Vue组件中,通过v-ifv-show条件来选择是否启用当前的Swiper组件。例如:

      ```js

      ```

      在这个例子中,如果sliders数组中有任何元素被添加或移除,handleSlideChangeEnd方法将被调用。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部