vue-awesome-swipe 基于vue使用的轮播组件 使用(改)

原文链接： https://www.mk2048.com/blog/blog.php?id=h0b001bbb0ib&title=vue-awesome-swipe+%E5%9F%BA%E4%BA%8Evue%E4%BD%BF%E7%94%A8%E7%9A%84%E8%BD%AE%E6%92%AD%E7%BB%84%E4%BB%B6+%E4%BD%BF%E7%94%A8%28%E6%94%B9%29

npm install vue-awesome-swiper --save  //基于vue使用的轮播组件

<template>
  <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(banner,index) in banners" :key="index">
        <img v-if="banner.src" :src="banner.src">
      </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

　require('swiper/dist/css/swiper.css')

export default {
  data () {
    return {
      banners: [{ src: require('../img/1.jpg') }, { src: require('../img/4.jpg') }, { src: require('../img/5.jpg') }],
      swiperOption: {
        notNextTick: true,
        autoplay: 1000,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true,
        onSlideChangeEnd: swiper => {
          this.page = swiper.realIndex   1
          this.index = swiper.realIndex
        }
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>
<style>

.swiper-slide{
  margin-top: 10px;
  height: 230px;
}

.swiper-slideimg {
  width: 100%;
  height: 100%;
}
</style>

更多专业前端知识，请上 【猿2048】www.mk2048.com