神一样的bug,关于swiper

vue-awesome-swiper
使用vue-awesome-swiper封装了一个swiper组件,结果出现了这么一个问题
设置了loop:true,当动态加载的slides只有两个的时候,第一个slide从第二次loop开始,一闪而过(大于等于3个slide时候正常),不管是调用updateSlides()还是延迟加载,都不行,很崩溃。
然后决定,slides两个的时候关闭loop,于是设置了一个长度判断的参数isloop,结果,奇葩出来了,即便不使用这个参数,swiper仍然可以正常运作了。。。。
上代码。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。请大神解释。。。。。。。。。。。。。

clipboard.png
直接把isloop设置true或者false组件是不能如逾期运行的,只有设置函数计算才可以得到的布尔值才可以
组件详情如下:

<template>
<swiper class='artswiper' :options="swiperOption" ref="artSwiper">
    <!-- slides -->
    <swiper-slide class='homeslide' :key='index+1' v-for='(i,index) in swiperlist'>
        <img class="slideimg" :src="i"/>
    </swiper-slide>
    <div class="swiper-pagination" v-if="guide" slot="pagination"></div>
    <div class="swiper-button-next" v-if="showpre" slot='button-next'></div>
    <div class="swiper-button-prev" v-if="showpre" slot='button-prev'></div>
</swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    name:'artswiper',
    components: {
       swiper,
       swiperSlide
    },
    props:{
        swiperlist:'',
        showpre:{
            default:false
        },
        auto:{
            default:true
        },
        guide:{
            default:true
        },
        ispause:{
            default:false
        },
        isloop:{
            default:true
        }
    },
    data () {
        var v = this;
        return {
            swiperOption:{
                resistanceRatio:0,
                loop:true,
                autoplay:this.auto?{
                    disableOnInteraction:false,
                }:false,
                pagination: {
                   el: '.swiper-pagination',
                   clickable: true
               },
               on:{
                   slideChange(ev) {               
                   this.activeIndex,this.realIndex)
                  v.$emit('slidechange',this.realIndex)
                }
              },
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
            }
        }
    },
    computed:{
        swiper() {
           return this.$refs.artSwiper.swiper
        },
    },
    mounted:function(){
    },
    watch:{
        ispause(val,old) {
            //swiper切换显示时候,重新计算slides,并且开关自动播放
            this.swiper.updateSlides()
            if(val) {
                this.swiper.autoplay.stop();
            }else {
                this.swiper.autoplay.start();
            }
        }
    }
}
</script>
阅读 7.6k
1 个回答
  1. vue-awesome-swiper 问题很多;
  2. 注意在于 swper的更新,4.0和 3.0的API变化,供参考。

Swiper4的API变化

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题