在 VueJS 上滑动时获取幻灯片的当前位置？

Question

基本上，我试图获取幻灯片的位置，然后通过向该幻灯片添加 class 来更新 html。但是我不知道如何在每次滑动时获取当前位置，如何更新 swipe_active 数据。

这是vue js文件。

mounted(){
 let element = document.getElementById('mySwipe');
 if (window.innerWidth< 550){
    window.mySwipe  =   Swipe (element, {
      startSlide: 1,
      auto: 0,
      autoRestart: true,
      continuous: true,
      disableScroll: true,
      stopPropagation: true,
      callback: function(index, element) {},
      transitionEnd: function(index, element) {}
    });
  }
  this.swipe_active = window.mySwipe.getPos();
}

这是html

  <div  :class="{black_swipe : swipe_active === 0  }"></div>
  <div  :class="{black_swipe : swipe_active === 1  }"></div>

Answer 1

mounted 钩子只被调用一次，即当组件完成安装 DOM.

在创建新的 Swipe 实例时传递的配置选项中有一个 callback 属性可用。此属性接受一个函数，该函数将在每次幻灯片更改后调用

您可以使用它来更新 swipe_active 数据。

mounted(){
 let element = document.getElementById('mySwipe');
 if (window.innerWidth< 550){
    window.mySwipe  = new  Swipe (element, {
      startSlide: 1,
      auto: 0,
      autoRestart: true,
      continuous: true,
      disableScroll: true,
      stopPropagation: true,
      callback: this.swipeCallback,
      transitionEnd: function(index, element) {}
    });
  }
  this.swipe_active = window.mySwipe.getPos();
},

methods: {
    swipeCallback(index, element){
        this.swipe_active = window.mySwipe.getPos();
    }

}

在 VueJS 上滑动时获取幻灯片的当前位置？

Getting the current position of the slide when you swipe on VueJS?

swipe

vue.js