代码之家 › 专栏 › 技术社区 › Raluca

在滑块中获取居中元素的对象

vuetify.js vue-component vuejs2 vue.js javascript

Raluca · 技术社区 · 6 年前

我必须在页面的某个地方显示一个对象的字段,该字段通过友好方式传输到滑块。它应该始终是滑块中心的对象。

我正在使用vue Aweasome 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"
    }
  }
};

中间的幻灯片总是有一个等级。“swiper slide active”,但我现在不知道我可以从中找到对象prewiewArtefact'应包含artefact。文本

1 回复 | 直到 6 年前

Mohd_PH 6 年前

这很难: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