vue-awesome-swiper頁面渲染輪播無效的問題

vue-awesome-swiper的問題

使用vue-cli搭建的項目，在圖片輪播部分採用了vue-awesome-swiper插件，沒有數據時有輪播效果，接入數據渲染時，輪播無效。在網上查找一番以後，解決方法是，在最外面的swiper標籤，添加v-if判斷：v-if="swiperSlides.length > 1" 則能夠正常滾動。代碼以下：

<template>
  <swiper :options="swiperOption" class="hot_swiper" v-if="swiperSlides.length > 1" >
    <swiper-slide   v-for="(slide,index) in swiperSlides" :key="index">
      <img :src="slide" alt="pictrue">
    </swiper-slide>
  </swiper>
</template>

這裏涉及到vue-awesome-swiper的使用，簡單介紹一下，也方便本身之後查閱。

vue-awesome-swiper的安裝

npm i vue-awesome-swiper -S    //  swiper專門針對vue出的

全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper);

在組件中使用

① template部分：

<template>
  <swiper :options="swiperOption" class="hot_swiper" v-if="swiperSlides.length > 1" >
    <swiper-slide   v-for="(slide,index) in swiperSlides" :key="index">
      <img :src="slide" alt="pictrue">
    </swiper-slide>
  </swiper>
</template>

② script部分

import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
  name: 'hot',
  data() {
    return {
      swiperOption: {      // swiper4的寫法喲！
        autoplay: {       // 自動輪播
          delay: 3000,
          disableOnInteraction: false
        },
        slidesPerView: 5,   // 一次輪播放幾張圖
        spaceBetween: 30,   // 每一張圖間隔的距離
        loop: true       // 無限輪播
      },
      swiperSlides: []
    }
  }
}

對於 vue-awesome-swiper 的使用暫時只有這麼多，後面有進一步研究再來補充。衝鴨~

而圖片輪播也可應用一些UI組件，例如Element-UI（PC端）的Carousel 走馬燈，像是我最近着手的項目的banner輪播圖，就用了ELement-UI的Carousel、Mint-UI（移動端）的Swiper等等……看項目的須要。