Question

我使用vue-awesome-swiper from here，但遇到了问题。滑动器具有用于在内部滑动幻灯片的按钮（上一张幻灯片，下一张幻灯片），当我将这两个组件放在一页中时，它们会通过彼此的按钮来滑动幻灯片。因此，如果我尝试在第一个滑动器中滑动到下一个滑块，则第二个滑动器也将滑动到下一个滑动器。这是我的组件代码：

    <template>
  <div class="container">
      <div class="row">
          <div class="col-xs-12">
            <div class='mobSwip'>
              <div class="swiper-container" id="quick-view-slider">
                <swiper :options="swiperOption">
                  <swiper-slide v-for="screen in screens" :key="screen.key"><img v-bind:src="`https://admin.springsapps.com${screen.url}`"/></swiper-slide>
                  <swiper-slide v-if="!screens"><img src="@/assets/images/quick-view-1.png"/></swiper-slide>
                </swiper>
              </div>
              <!-- <div class="swiper-pagination" slot="pagination"></div> -->
              <div class="swiper-button-next"><span class="icon-play"></span></div>
              <div class="swiper-button-prev"><span class="icon-play-flip"></span></div>
              <!-- <button @click="swipeNext">next</button> -->
            </div>
            </div>
          </div>
        </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    props: {
      screens: {
        type: Array,
        required: false
      }
    },
    data: function () {
      return {
        swiperOption: {
          slidesPerView: 5,
          spaceBetween: 30,
          centeredSlides: true,
          // pagination: {
          //   el: '.swiper-pagination',
          //   clickable: true
          // },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
            // nextEl: this.$el.querySelector('.swiper-button-next'),
            // prevEl: this.$el.querySelector('.swiper-button-prev')
          }
        },
      }
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style scoped>
  .swiper-slide {
    width: 60%;
  }
  .swiper-slide:nth-child(2n) {
      width: 40%;
  }
  .swiper-slide:nth-child(3n) {
      width: 20%;
  }
</style>

我试图使用queryselector，通过refs获取按钮类，试图通过方法来刷官方文档中的内容，但是它不起作用。按钮的唯一作用方式是像在我的代码中那样按类在数据对象中获取它们……如何使按钮有用且独立？

Answer 1

这是为我解决的问题（Nuxt.js / SSR项目）：

1）将两个刷卡器都放在不同的组件中（不确定是否需要）

2）将id属性添加到按钮的div中： <div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div> <div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div>

3）在swiper选项对象中，引用新的id，而不是swiper-button-prev和swiper-button-next类：

swiperOption: {
        direction: 'horizontal',
        slidesPerView: 4,
        spaceBetween: 6,
        navigation: {
          nextEl: '#button-next-relacionados',
          prevEl: '#button-prev-relacionados'
        },

Answer 2

我用

this.$refs.swiper.swiperInstance.autoplay.start()

Answer 3

我已经解决了！通过查询swiper上的ref并使用

this.$refs.mobileScreensSwiper.swiper.slideNext()

作为方法

令人敬畏的轻扫，两个组件通过彼此的按钮滑动

3 个答案: