Question

所以基本上，我试图获得幻灯片的位置，然后通过向该幻灯片添加一个类来更新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上滑动时获取幻灯片的当前位置？

1 个答案: