vue-awesome-swiper中的數據異步加載

<template>
<div>
//第一個輪播 加了v-if 判斷，可以實現 loop 輪循
<swiper v-if="gglist.length>1" :options="swiperOption" ref="mySwiper" class="swiper-box">
<!-- slides -->
<swiper-slide v-for="m in gglist">{{m}}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
////第二個輪播 沒加判斷 不能實現loop 可試試看
<swiper :options="swiperOption" ref="mySwiper2" class="swiper-box">
<!-- slides -->
<swiper-slide v-for="m in gglist">{{m}}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</template>

<script>
//前提你已經下載好vue-awesome-swiper,swiper.min.css 引入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.min.css'
Vue.use(VueAwesomeSwiper)

export default{
components: {
swiper:VueAwesomeSwiper.swiper,
swiperSlide:VueAwesomeSwiper.swiperSlide
},
data(){
return{
//配置
swiperOption: {
loop : true,
speed: 900,
notNextTick: true,
autoplay:true,
preloadImages: false,
pagination: {
el: '.swiper-pagination',
},
paginationClickable :true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
},
gglist:[],//存放的數據list，數據的獲取是異步的

}
},
beforeCreate:function(){

},
created:function(){

},
beforeMount: function () {

},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted:function(){
setTimeout（function(){
this.gglist = response.data.pl;
},10）;
})
}
}
</script>

 

需求：需要異步的獲取數據並加載到現在輪播圖中，因為是異步加載的，在數據還沒有插入到dom中，swiper已經初始化完畢，因為也沒找到重新初始化的方法，所以就會出現一個當配置loop的時候卻無法生效，當使用v-if的時候就可以解決，這個問題，有了圖片才去加載這個dom，才去初始化輪播就可以避免swiper初始化的先后順序；

if(this.infoData.picture.length>0){
                    // 輪播圖相關配置
                    this.swiperOptionTop.loopedSlides = this.infoData.picture.length;
                    this.swiperOptionThumbs.loopedSlides = this.infoData.picture.length;
                    // 兩個輪播相互綁定
                    this.$nextTick(() => {
                        const swiperTop = this.$refs.swiperTop.swiper;
                        const swiperThumbs = this.$refs.swiperThumbs.swiper;
                        swiperTop.controller.control = swiperThumbs;
                        swiperThumbs.controller.control = swiperTop;
                    });
                }

 

 

vue-awesome-swiper的dom例子：https://surmon-china.github.io/vue-awesome-swiper/

 

 

 

后來因為項目需要，不需要輪播，最后去掉輪播，發現縮略圖控制的效果一直不太好，活動頁第一個不是在最前面，最后頁放棄了這樣使用vue-awesome-swiper;

然后嘗試直接使用swiper4.0,在vue項目中:

1、cnpm i swiper --save -dev ;

2、之后再需要的頁面引入：import Swiper from 'swiper'    import 'swiper/dist/css/swiper.css'

3、

<div style="width:50%;height: 486px;">
                    <div v-show="infoData.picture.length==0" class="noImg"></div>
                    
                    <div v-show="infoData.picture.length > 0" class="swiper-container gallery-top">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(url, index) in infoData.picture" :key="index">
                                <img class="detailImg" referrerpolicy="no-referrer" :src="url"/>
                            </div>
                        </div>
                    </div>
                    <div v-show="infoData.picture.length > 0" class="swiper-container gallery-thumbs">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(url, index) in infoData.picture" :key="index">
                                <img class="detailImg" referrerpolicy="no-referrer" :src="url"/>
                            </div>
                        </div>
                        <div class="swiper-button-prev" slot="button-prev"><i class="iconfont iconzuo" style="color: #FFFFFF;font-size: 14px;"></i></div>
                        <div class="swiper-button-next" slot="button-next" ref="nextbtn"><i class="iconfont iconyou" style="color: #FFFFFF;font-size: 16px;"></i></div>
                    </div>
                    
                </div>

4、在mounted里面：

var galleryThumbs = new Swiper('.gallery-thumbs', {
                  spaceBetween: 10,
                  slidesPerView: 4,
                  freeMode: false,
                  watchSlidesVisibility: true,
                  watchSlidesProgress: true,
                  observer:true,
                });
                var galleryTop = new Swiper('.gallery-top', {
                  spaceBetween: 10,
                  observer:true,
                  navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                  },
                  thumbs: {
                    swiper: galleryThumbs
                  }
                });

5、這樣一般就可以使用了，我的廢了老大勁在處理一個弱智問題，最后只因為我之前在css樣式上寫了這個，導致縮略圖的激活狀態一直不正確；手殘

.gallery-thumbs .swiper-slide-active {
opacity: 1;
}

6、改成這樣就可以正常的使用了：

.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}

 

不一定非得使用vue-awesome-swiper插件，還可以直接使用swiper像上面那樣