Question

<swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
  <swiper-slide class="slide-1">1.1</swiper-slide>
  <swiper-slide class="slide-2">1.2</swiper-slide>
  <swiper-slide class="slide-3">1.3</swiper-slide>
  <swiper-slide class="slide-4">1.4</swiper-slide>
  <swiper-slide class="slide-5">1.5</swiper-slide>
</swiper>

<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
  <swiper-slide class="slide-1">1</swiper-slide>
  <swiper-slide class="slide-2">2</swiper-slide>
  <swiper-slide class="slide-3">3</swiper-slide>
  <swiper-slide class="slide-4">4</swiper-slide>
  <swiper-slide class="slide-5">5</swiper-slide>
</swiper>

脚本：

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      swiperOptionTop: {
        spaceBetween: 10,
        slidesPerView: 1
      },
      swiperOptionThumbs: {
        spaceBetween: 10,
        slidesPerView: 4,
        slideToClickedSlide: true
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.swiperOptionTop.swiper;
    }
  },
  methods: {
    toSlide(i) {
      this.$refs.swiperOptionTop.swiper.slideTo(i);
    },
    toNext() {
      console.log("S>>> next " + this.$refs.swiperOptionTop.swiper);
      this.$refs.swiperOptionTop.swiper.slideNext();
    }
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper;
      const swiperThumbs = this.$refs.swiperThumbs.swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  }
};
</script>

但是没有效果。

问题：如何设置slideTo方法或使用滑块作为滑块（非常棒的滑动滑块）？

Answer 1

在您的代码存储箱中，我发现了以下错误：

1。删除.native中的@click.native后缀

<button @click="toSlide(0)">To Slide 1</button>
<button @click="toSlide(1)">To Slide 2</button>
<button @click="toSlide(2)">To Slide 3</button>

2。$refs指向的组件不正确

toSlide(i) {
  // Wrong ref
  // this.$refs.swiperOptionTop.swiper.slideTo(i)
  this.$refs.swiperTop.swiper.slideTo(i, 0);
}

在其他地方也有错误的裁判，您可以自己检查。

修改上述错误后，您可以发现slideTo方法可以正常执行，希望对您有所帮助：）

Answer 2

还请注意，如果您在模板中使用pug，则必须使用以下条目。

PUG
    Swiper(
           :options="swiperOptions" // { it's options }
           ref="swiperTop" // your reference name
          )
           SwiperSlide(v-for="(item, key) in images" :key="key") // your slides
JS
this.$refs.swiperTop.$swiper.slideTo(key)

Answer 3

确保您在编写代码时没有出错：

错误 1：

<div
  class="swiper-container"   //xxxx----custom label naming cannot be ”swiperr-container" or the class name in the component“
>
  <swiper class="swiper" :options="swiperOption" ref="mySwiper">
    <div
      class="swiper-stations" v-for="(item, index) in stations"
      :key="index"
    >  //xxxx----Div tags cannot be nested between  <swiper > and <swiper-slide>
      <swiper-slide></swiper-slide>
    </div>
  </swiper>
</div>

您必须按照以下步骤操作

如何在slideTo（）中使用vue-awesome-swiper？

3 个答案: