vue|vue swiper 5x vue-awesome-swiper 配置缩略图双向控制 vueswiper5xvue-awesome-swiper配置缩略

博客看了许多大多不得要领，处理根本无效，到处都是复制粘贴。
其实不难，就是懒，还是要自己写吧，自己动手丰衣足食。
由于一些未知的原因（可能是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",//缩略图激活态class可以自定义样式 }, on: { slideChangeTransitionStart: function() { //_this.activeProduct = _this.giftList[this.realIndex]; // 业务逻辑 }, }, }, swiperOptions2: { slidesPerView: 3.5, watchSlidesVisibility: true, //防止不可点击 on: { click: function(event) { _this.swiper1.slideTo(this.clickedIndex); //this.clickedIndex - 1使激活的slide滚动到一个合适的位置 this.slideTo( this.clickedIndex >= 1 ? this.clickedIndex - 1 : this.clickedIndex ); }, }, }, } }

计算属性获取实例

computed: { swiper1() { return this.$refs.mySwiper1.$swiper; }, swiper2() { return this.$refs.mySwiper2.$swiper; }, },

更新swiper实例 【vue|vue swiper 5x vue-awesome-swiper 配置缩略图双向控制】直接配置thumbs是无效的，
需要在异步数据加载完毕之后，对swiper进行更新，否则，配置是也是无法生效的

mounted() { this.asynchronousFun() },

methods: { //确保异步数据渲染完成后，更新swiper swiperPopOpened() { 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() }) }) } }