vue-flickity:如何将selectedIndex导入vue数据

Question

我用vue-flickity做旋转木马。有一个<flickity />组件(旋转木马)、一个带有数据{{ selectedIndex }}的<p>标记和一个从flickity获取当前幻灯片号并更新selectedIndex的按钮。

当用户向左或向右滚动(即称为下一次/以前方法)时，如何使用当前幻灯片索引自动更新下一次/以前？我很难“勾引”模块的那些方法。

我可以定义一个方法Next()并将其绑定到一个按钮，但是当用户滚动时它不会更新。

编辑：--我已经设法连接到on.change (使用mounted)。console.log现在向我展示了正确的selectedInde，但这并不是说“您在幻灯片编号{ selectedIndex }”的位置。

<template>
  <div>
    <flickity ref="flickity" :options="flickityOptions">
      <div class="carousel-cell">1</div>
      <div class="carousel-cell">2</div>
      <div class="carousel-cell">3</div>
      <div class="carousel-cell">4</div>
      <div class="carousel-cell">5</div>
    </flickity>
    <p>You are at Slide number {{ selectedIndex }}</p>
    <button @click="manualUpdate()">Update</button>
  </div>
</template>

<script>
import Flickity from 'vue-flickity'

export default {
  components: {
    Flickity
  },
  data() {
    return {
      flickityOptions: {
        initialIndex: 0,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: true
      },
      selectedIndex: 0
    }
  },
  methods: {
    manualUpdate() {
      this.selectedIndex = this.$refs.flickity.selectedIndex();
      console.log(this.selectedIndex)
    },
  },
  mounted() {
    this.$refs.flickity.on('change', function (event) {
      this.selectedIndex = event
      console.log(this.selectedIndex)
    })
  }
}
</script>

<style>
/* external css: flickity.css */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.carousel-cell {
  width: 80%;
  min-height: 50vh;
  max-height: 80vh;
  object-fit: contain;
  margin-right: 10px;
}
</style>

Answer 1

正如对此Github问题的解释一样，您需要绑定init事件上的侦听器。

最终结果如下：

<template>
  <div>
    <flickity ref="flickity" :options="flickityOptions" @init="onInit">
      <div class="carousel-cell">1</div>
      <div class="carousel-cell">2</div>
      <div class="carousel-cell">3</div>
      <div class="carousel-cell">4</div>
      <div class="carousel-cell">5</div>
    </flickity>
    <p>You are at Slide number {{ selectedIndex }}</p>
    <button @click="goToPrevious">Previous</button>
    <button @click="goToNext">Next</button>
  </div>
</template>

<script>
import Flickity from 'vue-flickity'

export default {
  components: {
    Flickity,
  },
  data() {
    return {
      flickityOptions: {
        initialIndex: 0,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: true,
      },
      selectedIndex: 0,
    }
  },
  methods: {
    goToNext() {
      this.$refs.flickity.next()
    },
    goToPrevious() {
      this.$refs.flickity.previous()
    },
    onInit() {
      this.$refs.flickity.on('change', (event) => {
        this.selectedIndex = event
        console.log('current index', event)
      })
    },
  },
}
</script>

<style>
/* external css: flickity.css */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.carousel-cell {
  width: 80%;
  min-height: 50vh;
  max-height: 80vh;
  object-fit: contain;
  margin-right: 10px;
}
</style>

确实没有其他事件，这是超级奇怪的，我用libery来编写以前的/下一个按钮，而不是保留一些手动的东西，但是您可以计算和偏移(没有为直接设置器找到任何方法)。