vue使用swiper的简单用法

<template>

<div @mouseenter="on_top_enter" @mouseleave="on_top_leave">

<swiper :options="swiperOption" v-if="swiperSlides.length>1" ref="mySwiper">

    <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">

      <img :src="slide.url">

    </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>

  </swiper>

</div>

</template>

<script>

import 'swiper/dist/css/swiper.css'

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

import axios from "axios"

export default {

  name: "Index",

  data() {

    return {

      swiperSlides: [],

      swiperOption:{

          pagination:{

            el:'.swiper-pagination',

            clickable:true,

          },

          // paginationClickable:true

          autoplay:{

            delay:5000,//秒

            stopOnLastSlide:false,

            disableOnInteraction:false,//滑动不会失效

          },

          // slidesPerView: 3,

          loop:true,//loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。

          loopFillGroupWithBlank: true,

          autoplayDisableOnInteraction:true

      },

      }

  },

  components:{

    swiper,

    swiperSlide

  },

  mounted(){

    this.loadBanner();

    // setInterval(()=>{

    //  console.log('异步数据')

    //  if(this.swiperSlides.length<3){

    //    this.swiperSlides.push(this.swiperSlides.length+1)

    //  }

    // },3000); 

  },

  methods: {

    loadBanner(){

      this.$http.get('../../static/data.json')

      .then((res)=>{

        console.log(res.data);

        this.swiperSlides=res.data.banner;

        console.log(this.swiperSlides);

      })

      .catch(function(res){

        console.log(res);

      })

    },

//通过获得的swiper对象来暂停自动播放

    on_top_enter(){

      this.mySwiper.autoplay.stop()

    },

    on_top_leave(){

      this.mySwiper.autoplay.start()

    }

  },

  computed:{

    //计算属性，获得可以操作的swiper对象

    mySwiper(){

      return this.$refs.mySwiper.swiper

    }

  }

};

</script>

<style scoped>

img{

  width: 100%;

  height: auto;

}

</style>