vue2.0使用swiper组件实现轮播效果


Posted in Javascript onNovember 27, 2017

轻松实现vue2.0轮播效果,供大家参考,具体内容如下

1、安装swiper

npm install swiper@3.4.1 --save-dev

2、引用组件

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

3、html页面代码

<div class="swiper-container" id="swiper">
  <div class="swiper-wrapper">
   <div class="swiper-slide" v-for="(item,$index) in detail.imgs">
   <a v-on:click="showPreview($index,detail.imgs,swiperObj)">
    <figure class="wp-avatar banner">
    <img v-cloak :src="item | toQiNiuImg"/>
    </figure>
   </a>
   </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  </div>

4、初始化组件,并设置参数

setTimeout(function () {
  state.swiperObj = new Swiper('#swiper', {
  loop: true,
  pagination: '.swiper-pagination',
  autoplay: 2000,
  paginationClickable: true
  });
 }, 100)

5、搞定,ok

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
解读vue生成的文件目录结构及说明
Nov 27 #Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 #Javascript
基于vue2.0实现简单轮播图
Nov 27 #Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 #Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 #Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 #Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 #Javascript
You might like
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
php防注
2007/01/15 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
动态加载js的几种方法
2006/10/23 Javascript
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
页面使用密码保护代码
2013/04/10 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
六行python代码的爱心曲线详解
2019/05/17 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
在python中求分布函数相关的包实例
2020/04/15 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
成考报名单位证明范本
2014/01/16 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
人民教师求职自荐信
2014/03/12 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
工程项目合作意向书
2015/05/08 职场文书
2015年手术室工作总结
2015/05/11 职场文书
2015初中团委工作总结
2015/07/28 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL