时间戳

首页 > 解决方案 > vue-flickity：如何将 selectedIndex 获取到 vue 数据中

vue.js - vue-flickity：如何将 selectedIndex 获取到 vue 数据中

问题描述

我正在使用vue-flickity作为轮播。有一个<flickity />组件（轮播）、一个<p>带有 data 的标签{{ selectedIndex }}和一个从 获取当前幻灯片编号flickity和更新的按钮selectedIndex。

当用户向左或向右滚动（即调用Next/Previous方法）时，如何自动更新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>

标签： vue.jsnuxt.jsvue-flickity

解决方案

正如关于这个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>

确实没有其他事件，这非常奇怪，我冒昧地编写了上一个/下一个按钮，而不是手动保存一些东西，但你可以计算和偏移（没有找到任何直接设置器的方法）。

推荐阅读