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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
如何使用原生Js实现随机点名详解
Jan 06 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 get_meta_tags()函数
2014/05/12 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
Open and Print a Word Document
2007/06/15 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
vue组件与复用详解
2018/04/08 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
pyshp创建shp点文件的方法
2018/12/31 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
python ftplib模块使用代码实例
2019/12/31 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
What is view? why do we have view?
2012/06/22 面试题
什么是.net
2015/08/03 面试题
学习雷锋精神心得体会范文
2014/03/12 职场文书
社区志愿者活动总结
2014/06/26 职场文书
优秀团队申报材料
2014/12/26 职场文书
答谢词范文
2015/01/05 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python