时间戳

首页 > 解决方案 > 如何正常制作 vue-awesome-swiper 循环并显示分页？

vue.js - 如何正常制作 vue-awesome-swiper 循环并显示分页？

问题描述

最近，我在我的项目中使用了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;  
      }  
  }
}

代码片段看起来很正常。但是我遇到了两个奇怪的问题：

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

所以我去github问题寻求帮助。遇到同样问题的人通过v-if="banners.length!=0"在swiper元素中使用解决了这些问题。但我很困惑为什么这两个问题与横幅的长度有关？有人可以解释一下吗？

标签： vue.jsswiper

解决方案

您似乎缺少<v-content>视图中的标签。

您的整个视图应该用 a 包裹<v-content>以确保正确调整大小。您可以在此处查看文档：https ://vuetifyjs.com/en/components/application/

模板：

<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>

推荐阅读