2020年1月19日

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>

 

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732