解决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 相关文章推荐
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
js实现旋转木马效果
Mar 17 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
countUp.js实现数字动态变化效果
Oct 17 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 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
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
用js实现in_array的方法
2013/11/05 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
python list转dict示例分享
2014/01/28 Python
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
Django卸载之后重新安装的方法
2017/03/15 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
python palywright库基本使用
2021/01/21 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
西式结婚主持词
2014/03/14 职场文书
《金子》教学反思
2014/04/13 职场文书
十佳护士先进事迹
2014/05/08 职场文书
设备管理实施方案
2014/05/31 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS