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 配置缩略图双向控制的主要内容,如果未能解决你的问题,请参考以下文章

vue引入Vue-Awesome

vue-cli 如何使用vue-awesome?

在vuejs 中使用Font Awesome字体图标

vue项目中使用阿里iconfont图标

vue 怎么挂载swiper

vue引入swiper报错