鍍金池/ 問答/網絡安全  HTML/ 神一樣的bug,關于swiper

神一樣的bug,關于swiper

vue-awesome-swiper
使用vue-awesome-swiper封裝了一個swiper組件,結果出現了這么一個問題
設置了loop:true,當動態(tài)加載的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>
回答
編輯回答
逗婦惱
  1. vue-awesome-swiper 問題很多;
  2. 注意在于 swper的更新,4.0和 3.0的API變化,供參考。

Swiper4的API變化

2018年8月26日 18:52