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

Posted pwindy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

以上是关于vue添加swiper的正确方式亲测---切图网的主要内容,如果未能解决你的问题,请参考以下文章

vue自定义分页组件---切图网

在vue中继续使用layer.js来做弹出层---切图网

vue-awesome-swiper的正确使用姿势

swiper在vue中正确的使用方法

vue 怎么挂载swiper

Swiper - 没有找到依赖打字稿,离子-vue