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 分号引起的一段调试问题
Jun 18 Javascript
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
javascript时区函数介绍
Sep 14 Javascript
TypeScript 中接口详解
Jun 19 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
详解Vue中watch的高级用法
May 02 Javascript
解读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的varchar字段的长度范围
2011/06/24 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
PHP7新功能总结
2019/04/14 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python设置检查点简单实现代码
2014/07/01 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python中字典映射类型的学习教程
2015/08/20 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
婚庆公司的创业计划书
2014/01/22 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
四风对照检查材料范文
2014/09/27 职场文书
新教师个人工作总结
2015/02/06 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
Go语言读取txt文档的操作方法
2022/01/22 Golang