Как сделать vue -wesome-swiper l oop нормально и отобразить нумерацию страниц? - PullRequest
Новая
       25

Как сделать vue -wesome-swiper l oop нормально и отобразить нумерацию страниц?

0 голосов
/ 08 марта 2020

Недавно я использовал vue -wesome-swiper в своем проекте. Вот мои коды из HomeSwiper. vue file: 

//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;  
      }  
  }
}

фрагмент кода выглядит нормально. Но я столкнулся с 2 странными проблемами:

  1. Я обнаружил, что изображения не могут нормально l oop, которые всегда останавливаются при достижении последнего изображения, даже если я установил l oop истинно в сценарии.
  2. Нумерация страниц не может отображаться

Поэтому я обратился за помощью к github. И Соменон, столкнувшийся с такими же проблемами, решает их с помощью v-if="banners.length!=0" в элементе swiper. Но я смущен, почему эти 2 проблемы как-то связаны с длиной баннеров? Может кто-нибудь объяснить это?

...