vue添加swiper的正确方式亲测---切图网

在vue项目中，我们在做图片轮播的方式和传统切图不同，传统切图中我们一般采用非常强大的swiper来完成，而在vue中一般依赖vue-awesome-swiper组件来完成（vue-awesome-swiper其实就是基于swiper4封装的vue插件，所以如果你刚好熟悉swiper.js插件的话，基本你都能看明白）。亲测有用，按照下面方法执行即可成功，方法如下：

1，安装组件通过命令行

npm install swiper

2，在main.js添加

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper) 

3，在当前页添加

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css'; 

4，在当前页data里面添加

swiperOption: {
pagination: {
el: '.swiper-pagination', clickable :true }, paginationClickable: true, autoplay: 2500, autoplayDisableOnInteraction: false, loop: false, coverflow: { rotate: 30, stretch: 10, depth: 60, modifier: 2, slideShadows : true } }, 

5，当前页添加

<swiper class="h-view" :options="swiperOption"> <swiper-slide v-for="(item,index) in bigPic" v-if="index<4 "> <router-link :to="{path:'/Knowledge_detail', query:{contentId: item.contentId}}"> <div class="img"> <img :src="item.bigImgUrl ? item.bigImgUrl : 'imgs/img01.jpg'"/> </div> </router-link> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper>