解决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语言中的Literal Syntax特性分析
Mar 08 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
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
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python绘制热力图示例
2019/09/27 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
运动会通讯稿300字
2014/02/02 职场文书
公司授权委托书样本
2014/09/15 职场文书
单位未婚证明范本
2014/11/25 职场文书
公务员个人年终总结
2015/02/12 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
python APScheduler执行定时任务介绍
2022/04/19 Python
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript