如何让vue-awesome-swiper正常循环并显示分页？

Question

最近，我使用了 vue-awesome-swiper(扫码器) 这是我在项目中的代码，这是HomeSwiper.vue文件中的代码。

//HTML

<template>
  <swiper :options="swiperOption"  ref="mySwiper">  
      <swiper-slide v-for="(item,index) in banners" :key="index">  
        <a :href="item.link">
          <img :src="item.image" alt=""> 
        </a>  
      </swiper-slide>  
      <div class="swiper-pagination" v-for="(item,index) in  banners" :key="index" slot="pagination">
      </div>  
  </swiper>  
</template>

// JS
import {swiper,swiperSlide} from 'vue-awesome-swiper'
require("swiper/dist/css/swiper.css");

export default {
  name:'HomeSwiper',
  props:{
    banners:{
      type:Array,
      default(){
        return []
      }  
    }
  },
  components:{
    swiper,
    swiperSlide
  },
  data() {  
    const that = this
    return {
      imgIndex: 1,
      swiperOption: {
        notNextTick: true,
        loop: true,
        initialSlide: 0,
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        speed: 800,
        direction: "horizontal",
        grabCursor: true,
        on: {
          slideChangeTransitionStart: function() {
            that.imgIndex= this.realIndex - 1;
          },
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets"
        }
      }
   }
  },   
  computed: {  
      swiper() {  
        return this.$refs.mySwiper.swiper;  
      }  
  }
}  

这段代码看起来很正常，但是我遇到了两个奇怪的问题，我发现图像不能正常循环，即使我在脚本中设置了循环为true，但总是在到达最后一个图像时停止。

1. 我发现图片不能正常循环，总是在到达最后一张图片时停止，即使我在脚本中把循环设置为true。
2. 分页无法显示

所以我去github问题上寻求帮助.和Somenone谁遇到同样的问题解决这些用 v-if="banners.length!=0" 但我很困惑，为什么这两个问题与横幅的长度有关？有人能解释一下吗？

Answer 1

似乎你错过了 <v-content> 标签。

你的整个视图应该用 <v-content> 以确保正确的尺寸。你可以在这里看到文档。https:/vuetifyjs.comencomponentsapplication。

模板。

<template>
    <v-content>
        <Swiper :options="swiperOption">
            <Swiper-Slide v-for="(item,index) in srcs" :key="index">
                <img class="slideImage" :src="require(`@/static/vuetifypro-pages/${ item }`)" :key="index" alt="">
            </Swiper-Slide>
            <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
        </Swiper>
    </v-content>
</template>

脚本。

<script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
    export default {
        name:'HomeSwiper',
        components:{
            Swiper,
            SwiperSlide
        },
        data() {
            return {
                srcs: {
                    1: 'Homepage_blur.jpg',
                    2: 'Login_bg.jpg',
                    3: 'home_huddle.jpg',
                },
                swiperOption: {
                    notNextTick: true,
                    loop: true,
                    initialSlide: 0,
                    autoplay: {
                        delay: 1500,
                        disableOnInteraction: true
                    },
                    speed: 800,
                    grabCursor: true,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                        type: "bullets"
                    }
                }
            }
        },
    }
</script>