vue swipe 轮播图的使用

 1，安装

npm install vue-awesome-swiper --save

2，在vue文件中使用

     1、全局引入

import vueSwiper from 'vue-awesome-swiper'  //引入vue-awesome-swiper
import 'swiper/dist/css/swiper.css'  //引入样式Vue.config.productionTip = falseVue.use(vueSwiper)  //使用插件

     2、单页面使用

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {name: "",components: {swiper,swiperSlide},
}

3，标签

  <swiper :options="swiperOption" ref="imgOverview" style="height: 100%;"><swiper-slide v-for="(img, index) in list2" :key="index"><div class="swiper-zoom-container"><img :src="img" alt=""></div></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper>

4，data里面

      data(){swiperOption: {width: window.innerWidth,zoom: true,initialSlide: 0,//显示分页pagination: {el: '.swiper-pagination',clickable: true, //允许分页点击跳转type: 'fraction',},prevButton:'.swiper-button-prev',//上一张nextButton:'.swiper-button-next',//下一张//设置点击箭头navigation: {nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev'},//开启循环模式loop: true,//开启鼠标滚轮控制Swiper切换mousewheel: true,},}

5，效果图