vue swiper 5x vue-awesome-swiper 配置缩略图双向控制
Posted 江月寒
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue swiper 5x vue-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实例
直接配置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()
})
})
}
}
以上是关于vue swiper 5x vue-awesome-swiper 配置缩略图双向控制的主要内容,如果未能解决你的问题,请参考以下文章