这次给大家带来如何操作swiper在vue中使用，操作swiper在vue中使用的注意事项有哪些，下面就是实战案例，一起来看一下。
Swiper简介
Swiper常用于移动端网站的内容触摸滑动。
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
解决vue中使用swiper插件，在引入swiper插件后，发现无法正常运行问题
这次我们模拟从后台取下数据，然后数据绑定在swiper标签中。
import Swiper from "../../static/js/swiper-3.4.0.min.js"; import header from 'components/header.vue'; export default { components : { abc : header }, data(){ return { swiper:"" } }, mounted(){ this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){ this.swiper=res.data.data.slide; var mySwiper = new Swiper('.swiper-container', { autoplay: 2000,//可选选项，自动滑动 //分页器 pagination : '.swiper-pagination', paginationClickable :true, observer: true }) }) } } @import "../../static/css/home.css"; @import "../../static/css/swiper-3.4.0.min.css";
登录后复制
重点就在mounted()的使用，需要把这些方法都放在 mounted()里使用， mounted()是 vue生命周期钩子 ，你也可以理解为当挂载实例到 DOM完了后，才会触发的而方法。
下面看下swiper在vue中的用法
首先通过npm i vue-awesome-swiper –save 来在vue中下载插件
然后再main.js中引入
require('swiper/dist/css/swiper.css')import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)
登录后复制
接着在需要用到的组件里结构中插入代码
登录后复制
然后在data中定义轮播图
swiperOption: {pagination: '.swiper-pagination',paginationClickable: true,autoplay: 2500,autoplayDisableOnInteraction: false,loop: false,coverflow: { rotate: 30, stretch: 10, depth: 60, modifier: 2, slideShadows : true }},
登录后复制
此时的coverflow是轮播图切换的方式 更改属性可切换轮播模式。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Vue做出组件轮播切换使用效果
Vue做出组件轮播切换使用效果
以上就是如何操作swiper在vue中使用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3185632.html
