解决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 相关文章推荐
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
jQuery load方法用法集锦
Dec 06 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
php7 新增功能实例总结
2020/05/25 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
判断网页编码的方法python版
2016/08/12 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
幼儿园优秀教师事迹
2014/02/13 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
收款委托书
2014/10/14 职场文书
大雁塔导游词
2015/02/04 职场文书
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript