解决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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
javascript实现图片轮换动作方法
Aug 07 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 printf输出格式使用说明
2010/12/05 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
验证手机号码的JS方法分享
2013/09/10 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
python模拟实现斗地主发牌
2020/01/07 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
学习保证书
2015/01/17 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL