美文网首页
在vue-awesome-swiper中,将loop设置为tru

在vue-awesome-swiper中,将loop设置为tru

作者: fortitude1990 | 来源:发表于2019-10-21 11:08 被阅读0次

    在使用vue-awesome-swiper的时候,将loop值设置为true无效的解决方法

    <swiper class="my-swiper" ref="mySwiper" :options="swiperOption">
                <swiper-slide v-for="(item, index) in bannerList" :key="index">
                    <img class="img" :src="item.bannerPicturePath"/>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    
    
    swiperOption: {
                    loop: true,
                    speed:1000,
                    autoplay: 1000,
                    observer:true,//修改swiper自己或子元素时,自动初始化swiper 
               observeParents:true,//修改swiper的父元素时,自动初始化swiper 
                    pagination: {
                        el: '.swiper-pagination',
                        bulletClass: 'my-bullet',
                        bulletActiveClass: 'my-bullet-active',
                    },
                    
                },
    

    解决方案:

    Step 1

    在v-for的上一级,添加 v-if

     <swiper class="my-swiper" ref="mySwiper" :options="swiperOption" v-if="bannerList.length>0">
                <swiper-slide v-for="(item, index) in bannerList" :key="index">
                    <img class="img" :src="item.bannerPicturePath"/>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
    

    这样就解决了,无法循环的问题,但是还是没有自动去循环。

    Step 2

    修改autoplay值

    swiperOption: {
                    loop: true,
                    speed:1000,
                    autoplay: {
                      delay: 3000,
                      disableOnInteraction: false,
                      //stopOnLastSlide: false
                    },
                    observer:true,//修改swiper自己或子元素时,自动初始化swiper 
                   observeParents:true,//修改swiper的父元素时,自动初始化swiper 
                    pagination: {
                        el: '.swiper-pagination',
                        bulletClass: 'my-bullet',
                        bulletActiveClass: 'my-bullet-active',
                    },
                    
                },
    

    相关文章

      网友评论

          本文标题:在vue-awesome-swiper中,将loop设置为tru

          本文链接:https://www.haomeiwen.com/subject/fezzmctx.html