vue3.0用vue-awesome-swiper

使用新版vue-awesome-swiper出現了一些bug

vue-awesome-swiper組件pagination小圓點不顯示問題

不會自動播放

swiper沒有css

參考如下配置

基本使用方法

1.安裝

cnpm install vue-awesome-swiper --save

 

2.引用

/*全局引入*/
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
    Vue.use(VueAwesomeSwiper, /* { default global options } */)


 /*組件方式引用*/
    import 'swiper/dist/css/swiper.css'////這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
    components: {
      swiper,
      swiperSlide
    }

 

3.使用

    <swiper :options="swiperOption">
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
    </swiper>
    <!--以下看需要添加-->
    <div class="swiper-scrollbar"></div> //滾動條
    <div class="swiper-button-next"></div> //下一項
    <div class="swiper-button-prev"></div> //上一項
    <div class="swiper-pagination"></div> //標頁碼

data() {
    return {
      swiperOption: {  
        notNextTick: true, // notNextTick是一個組件自有屬性，如果notNextTick設置為true，組件則不會通過NextTick來實例化swiper，也就意味着你可以在第一時間獲取到swiper對象，假如你需要剛加載遍使用獲取swiper對象來做什么事，那么這個屬性一定要是true
        autoplay: {
          delay: 1000, //自動切換的時間間隔，單位ms
          stopOnLastSlide: false, //當切換到最后一個slide時停止自動切換
          stopOnLastSlide: true, //如果設置為true，當切換到最后一個slide時停止自動切換。
          disableOnInteraction: false, //用戶操作swiper之后，是否禁止autoplay。
          reverseDirection: false, //開啟反向自動輪播。
          waitForTransition: true, //等待過渡完畢。自動切換會在slide過渡完畢后才開始計時。
        },
        loop: true,
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        pagination: {
          el: '.swiper-pagination'
        },
        centeredSlides: true,
        paginationClickable: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        keyboard: true,
        mousewheelControl: true,
        observeParents: true, // 如果自行設計了插件，那么插件的一些配置相關參數，也應該出現在這個對象中，如下debugger
        debugger: true  
      } 
    }
  },

 

4.可選參數

fadeEffect: {
    crossFade: false,
  }

cubeEffect: {
    slideShadows: true, //開啟slide陰影。默認 true。
    shadow: true, //開啟投影。默認 true。
    shadowOffset: 100, //投影距離。默認 20，單位px。
    shadowScale: 0.6 //投影縮放比例。默認0.94。
  },
coverflowEffect: {
    rotate: 30, //slide做3d旋轉時Y軸的旋轉角度。默認50。
    stretch: 10, //每個slide之間的拉伸值，越大slide靠得越緊。 默認0。
    depth: 60, //slide的位置深度。值越大z軸距離越遠，看起來越小。 默認100。
    modifier: 2, //depth和rotate和stretch的倍率，相當於depth*modifier、rotate*modifier、stretch*modifier，值越大這三個參數的效果越明顯。默認1。
    slideShadows : true //開啟slide陰影。默認 true。
  },
flipEffect: {
    slideShadows : true, //slides的陰影。默認true。
    limitRotation : true, //限制最大旋轉角度為180度，默認true。
  }
zoom: {
     maxRatio: 5, //最大倍數
     minRatio: 2, //最小倍數
     toggle: false, //不允許雙擊縮放，只允許手機端觸摸縮放。
     containerClass: 'my-zoom-container', //zoom container 類名
   },
navigation: {
    nextEl: '.swiper-button-next', //前進按鈕的css選擇器或HTML元素。
    prevEl: '.swiper-button-prev', //后退按鈕的css選擇器或HTML元素。
    hideOnClick: true, //點擊slide時顯示/隱藏按鈕
    disabledClass: 'my-button-disabled', //前進后退按鈕不可用時的類名。
    hiddenClass: 'my-button-hidden', //按鈕隱藏時的Class
   },

pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    //type: 'fraction',
    //type : 'progressbar',
    //type : 'custom',
    progressbarOpposite: true, //使進度條分頁器與Swiper的direction參數相反
    bulletElement : 'li', //設定分頁器指示器（小點）的HTML標簽。
    dynamicBullets: true,  //動態分頁器，當你的slide很多時，開啟后，分頁器小點的數量會部分隱藏。
    dynamicMainBullets: 2, //動態分頁器的主指示點的數量
    hideOnClick: true, //默認分頁器會一直顯示。這個選項設置為true時點擊Swiper會隱藏/顯示分頁器。
    clickable: true, //此參數設置為true時，點擊分頁器的指示點分頁器會控制Swiper切換。

  },
scrollbar: {
     el: '.swiper-scrollbar',
     hide: true, //滾動條是否自動隱藏。默認：false，不會自動隱藏。
     draggable: true, //該參數設置為true時允許拖動滾動條。
     snapOnRelease: true, //如果設置為false，釋放滾動條時slide不會自動貼合。
     dragSize: 30, //設置滾動條指示的尺寸。默認'auto': 自動，或者設置num(px)。
   },