解决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语法对{}处理的坑爹之处
Jun 05 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
angular directive的简单使用总结
May 24 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
koa源码中promise的解读
Nov 13 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
Vue实现多标签选择器
Nov 28 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
ThinkPHP安装和设置
2015/07/27 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
浅谈Python NLP入门教程
2017/12/25 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
个人工作表现评语
2014/04/30 职场文书
结对共建协议书
2014/08/20 职场文书
邀请书格式范文
2015/02/02 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
总经理司机岗位职责
2015/04/10 职场文书
现实表现证明材料
2015/06/19 职场文书
导游词之无锡梅园
2019/11/28 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python