关于vue中swiper轮播图组件使⽤
前⾔：vue有许多开源组件提供使⽤，其中awesome-swiper组件就可以⾮常⽅便的创建各式各样的轮播图，下⾯来看看如何使⽤这个组件。
注：此⽂档为2018年撰写，不适⽤于最新版swiper
⼀、关于vue-awesome-swiper组件
⼀个开源的轮播图组件，github地址及官⽹见下，关于安装步骤及使⽤都介绍得⼗分清楚。
⼆、在项⽬中使⽤awesome-swiper
1、安装依赖
npm install vue-awesome-swiper --save
2、引⼊awesome-swiper
⽀持全局引⼊和在组件中引⼊2种⽅式，如果项⽬中只有⼀个轮播的话推荐在组件中引⼊，有多个轮播则推荐在全局中引⼊。
（1）全局引⼊⽅式，在main.js中添加以下代码
（2）组件中引⼊，在需要引⼊轮播图的.vue⽂件中添加以下代码
3、组件内调⽤轮播图
⽀持SPA(single page web application，单页Web应⽤）和SSR（Server Side Rendering，服务端渲染）2种模式，SPA通过ref属性来查swiper实例，⽽SSR借助命令参数查swiper实例，在使⽤⽅⾯2种模式都是⼀样的。
（1）SPA模式
HTML结构见下，分页器、向左向右滚动按钮、滚动条等都是可选的，如不需要注释掉即可
js实现轮播图最简代码
效果见下
（2）SSR模式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。