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像上面那样