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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
js canvas实现俄罗斯方块
Oct 11 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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
bootstrap轮播图示例代码分享
2017/05/17 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
python冒泡排序简单实现方法
2015/07/09 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
window下eclipse安装python插件教程
2017/04/24 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python关闭占用端口方式
2019/12/17 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
业务主管岗位职责
2013/11/20 职场文书
乔迁宴答谢词
2014/01/21 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
大学课外活动总结
2014/07/09 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
先进班组事迹材料
2014/12/25 职场文书
学校食品安全责任书
2015/01/29 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
建议书的格式及范文
2015/09/14 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android