1

在 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)
  },
}
4

1 回答 1

1

我认为你可以做这样的事情（至少，它对我有用）：

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

希望能帮助到你，

于 2019-11-04T09:32:17.887 回答