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

Posted 2021-03-11 pwindy

在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>