Ionic 4 vue - 获取幻灯片索引

Question

在 ionic/vue 中，我不知道如何获取幻灯片索引。 getActiveIndex 甚至没有触发，它在文档中，但不清楚如何使用它。 ionSlideDidChange 触发，但我看不到与活动幻灯片索引相关的任何内容。了解哪个滑块处于活动状态的最佳方法是什么？

  <ion-slides pager="true" @ionSlideDidChange="ionSlideDidChange" @getActiveIndex="getActiveIndex($event)" :options="slideOptions">
    <ion-slide v-for="item in paymentAccounts" :key="item.code">
      <div class="account-info">
        <div class="account-name">
          {{ item.label }}
          <br />
          R {{ item.balance }}
        </div>
        <div class="account-footer">
          <ion-grid>
            <ion-row>
              <ion-col class="moneyInOut-label">Money-In</ion-col>
              <ion-col class="moneyInOut-label">Money-Out</ion-col>
            </ion-row>
            <ion-row>
              <ion-col class="moneyInOut-amount">{{ item.moneyIn }}</ion-col>
              <ion-col class="moneyInOut-amount">{{ item.moneyOut }}</ion-col>
            </ion-row>
          </ion-grid>
        </div>
      </div>
    </ion-slide>
  </ion-slides>

JS:

methods: {
  getActiveIndex(r) {
    console.log("r", r)
  },
  ionSlideDidChange(e) {
    console.log("e",e)
  },
}

Answer 1

我认为你可以这样做（至少对我有用）：

ionSlideDidChange(e) {
  e.target.getActiveIndex().then(i => {
    this.activeIndex = i;
  });
}

希望对您有所帮助，

Ionic 4 vue - 获取幻灯片索引

Ionic 4 vue - Get slide index

slider

ionic4

ionic-vue