获取滑块居中元素的对象

Question

我必须在页面某处显示我动态传输到滑块的对象字段。它应该始终是位于滑块中心的对象。

我正在使用 vue-awesome-slider。到目前为止，我有以下代码：

<v-layout>
      <v-flex xs4>
        <div >
          <p v-html="previewArtefact"></p>
        </div>
      </v-flex>
      <v-flex xs8>
        <swiper class="" :options="swiperOption" >

        <swiper-slide v-for="(artefact,i) in artefacts" :key="i" v-if="i<5">
            <web-artefact-card  :artefact='artefact'></web-artefact-card>
        </swiper-slide> 

        <div class="swiper-pagination " slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>

        </swiper>
      </v-flex>
</v-layout>

并且：

data() {
return {
  previewArtefact:
    '<i style="padding-left:10%">The text of the artefact...</i>',
  swiperOption: {
    slidesPerView: 3,
    spaceBetween: 30,
    centeredSlides: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    }
  }
};

中间的幻灯片总是有一个 class '.swiper-slide-active'，但我现在不知道我是否可以从那里到达目标。 'prewiewArtefact' 应该包含 artefact.text .

Answer 1

呸，这很难 :D，好的，这是一个对我有用的例子，我找不到更好的方法

<template>
 <div>
 <swiper :options="swiperOption" ref="mySwiperA">
  <!-- slides -->
  <swiper-slide>I'm Slide 1</swiper-slide>
  <swiper-slide>I'm Slide 2</swiper-slide>
  <swiper-slide>I'm Slide 3</swiper-slide>
  <swiper-slide>I'm Slide 4</swiper-slide>
  <swiper-slide>I'm Slide 5</swiper-slide>
  <swiper-slide>I'm Slide 6</swiper-slide>
  <swiper-slide>I'm Slide 7</swiper-slide>

 </swiper>

 <p>{{ swiper ? swiper.activeIndex : '' }}</p>
 </div>
</template>

<script>
 export default {
  data(){
   return {
    swiperOption:{
     slidesPerView: 3,
     centeredSlides: true,
     pagination: {
      el: ".swiper-pagination",
      clickable: true
     },
     navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
     }
    },
    swiper: null
  }
 },
 mounted(){
  this.swiper = this.$refs.mySwiperA.swiper
 }
}
</script>

简单地当vue被挂载时你需要设置this.swiper到this.$refs.{swiper ref}.swiper然后你可以通过调用this.swiper.activeIndex

来获取活动索引

获取滑块居中元素的对象

Get the object of the centered element in a slider

javascript

vue.js

vue-component

vuejs2

vuetify.js