现在显示的Swiper.IO分页点

Question

出于某种原因，刷卡器未显示我创建的图像转盘的分页。它显示在dom中，但高度为0。手动更改它不会执行任何操作。有什么想法吗？

import Swiper from '../../vendor/swiper.min.js';

export default {
  name: 'ImageCarouselBlock',
  components: {
    MediaImage,
  },
  props: {
    cmsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  mounted() {
    let carouselConfig = {};
    if (this.cmsData.auto){
      carouselConfig = {
        spaceBetween: 30,
        centeredSlide: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
      };
    }
    else {
      carouselConfig = {
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
        },
      };
    }
    const mySwiper = new Swiper('.swiper-container', carouselConfig);
  },
  computed: {
    images() {
      return this.cmsData.images.map( image => {
        return {
          //  TODO maybe get something from amplicence that tells how big they want the carousel to be?
          imageData : getMediaAndSources(image.name, '1500'),
        };
      });
    },
  },
};

这是相应的模板。我试图更改放置分页元素的位置，但没有任何效果。我在这里没有主意，需要一些帮助。

<div class="image-carousel-block">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="image in images">
        <media-image preload="true" :sources="image.imageData.sources" :media="image.imageData.media" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>

Answer 1

罪魁祸首在我的Vue文件中。

<template src="./template.html"></template>
<script src="./script.js"></script>
<style lang="stylus" scoped> -- wrong here
  @import '../../vendor/swiper.styl'
  @import './style.styl'
</style>

删除“作用域”对我有用。