解决vue中使用swiper插件问题及swiper在vue中的用法


Posted in Javascript onApril 04, 2018

Swiper简介

Swiper常用于移动端网站的内容触摸滑动。

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题

这次我们模拟从后台取下数据,然后数据绑定在swiper标签中。

<template> 
 <div class="homePage"> 
  <abc></abc> 
  <div id="banner"> 
   <div class="swiper-container"> 
     <div class="swiper-wrapper"> 
     <div class="swiper-slide" v-for="items in swiper" ><a href=""><img :src=" rel="external nofollow" items.activity.img"></a></div> 
     </div> 
     <div class="swiper-pagination"></div> 
   </div> 
  </div> 
 </div> 
</template> 

<script> 
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 
   }) 
  }) 
 } 
 
} 
</script> 
<style type="text/css"> 
 @import "../../static/css/home.css"; 
 @import "../../static/css/swiper-3.4.0.min.css"; 
</style>

 重点就在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)

接着在需要用到的组件里结构中插入代码

<div class="banner">
<swiper :options="swiperOption">
<swiper-slide v-for="items in allData.bannerphoto" key="items">
<img :src="items" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<div class="jc"></div>
</div>

然后在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中使用swiper插件问题及swiper在vue中的用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
VUE重点问题总结
Mar 19 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 #Javascript
vue中mint-ui的使用方法
Apr 04 #Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 #Javascript
JS实现DOM删除节点操作示例
Apr 04 #Javascript
JS实现的DOM插入节点操作示例
Apr 04 #Javascript
AngularJS 应用模块化的使用
Apr 04 #Javascript
vue todo-list组件发布到npm上的方法
Apr 04 #Javascript
You might like
浅析SVN常见问题及解决方法
2013/06/21 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP检测用户语言的方法
2015/06/15 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
javascript数组去掉重复
2011/05/12 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
Python 基础之字符串string详解及实例
2017/04/01 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python如何实现内容写在图片上
2018/03/23 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
学习十八大报告感言
2014/02/28 职场文书
售房协议书
2014/08/19 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
法人授权委托书样本
2014/09/19 职场文书
简历自我评价模板
2015/03/11 职场文书
2015年保送生自荐信
2015/03/24 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
九年级数学教学反思
2016/02/17 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python