blog看了很多博客，大部分没看懂，处理的根本不行，到处复制粘贴。其实不难，只是你懒，只好自己写了，自己吃饱穿暖。由于一些未知的原因（可能是vue-awesome-swiper/swiper自身的缺陷，也没有深入研究源码，希望大牛指正），以及已知的异步动态加载（v-for循环）的原因，官网配置不行依赖版本"vue":"^2.6.11","vue-awesome-swiper":"^4.1.1","swiper":"^5.4.5",data中的配置如下data(){const_this=this;return{swiperOptions1:{//updateOnImagesReady:true,thumbs:{slideThumbActiveClass:"my-slide-thumb-active",//缩略图活动类可以自定义样式},on:{slideChangeTransitionStart:function(){//_this.activeProduct=_this.giftList[this.realIndex];//业务逻辑},},},swiperOptions2:{slidesPerView:3.5,watchSlidesVisibility:true,//防止不可点击:{click:function(event){_this.swiper1.slideTo(this.clickedIndex);//this.clickedIndex-1使激活的幻灯片滚动到合适的位置this.slideTo(this.clickedIndex>=1?this.clickedIndex-1:this.clickedIndex);},},},}}计算属性以获取实例计算：{swiper1(){returnthis.$refs.mySwiper1.$swiper;},swiper2(){returnthis.$refs.mySwiper2.$swiper;},},updateswiperinstance直接配置Thumbs无效，需要在加载异步数据后更新swiper，否则配置不会生效mounted(){this.asynchronousFun()},methods:{//确保异步数据渲染完成，updateswiperswiperPopOpened(){this.$nextTick(()=>{this.swiper1.thumbs.swiper=this.swiper2;this.swiper1.update();});},asynchronousFun(){axios.post('xxx').then(res=>{this.scource=res.data;this.$nextTick(()=>{this.swiperPopOpened()})})}}
