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

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>