vue-awesome-swiper 輪播圖使用

     最近在作vue 的輪播圖的問題，項目中也遇到一些問題，查了 swiper 官網資料，

還有vue-awesome-swiper的文案，最後把怎麼使用這個插件簡單的說下，啥東西都須要本身實踐下，仍是老規矩舉個例子：

就是這個輪播圖：d 

  1. npm install vue-awesome-swiper --save 

  2.在main.js

import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper) //而後就能夠在組件中使用該插件

  3.在你的頁面使用：

<template>  
    <div>  
        <swiper :options="swiperOption" class="" ref="mySwiper">
          <swiper-slide v-for="banner in banners" :key="banner.index">
            <img :src="banner" class="swiper-img">
          </swiper-slide>
         <!-- 這是輪播的小圓點   -->
          <div class="swiper-pagination" slot="pagination"></div>
       </swiper>
    </div>  
</template>

4.就是 script裏面使用

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

在配置：

 由於最新版因此要這麼配置：而後能夠顯示原點

 data() { return { swiperOption: { //連接http://www.swiper.com.cn/api/
        loop: false, //無線滾動
 autoplay: { delay: 1500, disableOnInteraction: false //不中止切換
 }, //slidesPerview:3,//顯示容器同時的數量
        //observer:true,//修改swiper本身或子元素時，自動初始化swiper
        speed: 1500, spaceBetween: 15, direction: "horizontal", autoHeight: true, pagination: { el: ".swiper-pagination" }, slidesPerView: "auto" }, }; },

 

    而後遇到一個問題vue 頁面路由跳轉後，這個輪播圖不不輪播了，

   這個是最頭疼的事情，想了用路由跳轉來獲取 ref 這個，下面貼上代碼：

 

//定義這個sweiper對象
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    //這邊就能夠使用swiper這個對象去使用swiper官網中的那些方法     this.swiper.slideTo(0, 0, false);
  },
  watch: {
    $route(to, from) {
      console.log(this.$route.name);
      this.toMove();
    }
  },
  methods: {
    toMove() {
      //console.log(this.swiper);
      this.swiper.autoplay.run(); //這個方法就能夠無限循環啦 哈哈
    }
  }

最後：this.swiper.autoplay.run();經過watch監聽路由跳轉而後實現輪播圖無限循環的， 嘿嘿，感受解決BUG的能力愈來愈強了 ，哈哈， 以上就是使用 vue-awesome-swiper 的具體方法和代碼，但願能有幫助 哈哈