vue2.0使用swiper组件实现轮播的示例代码


Posted in Javascript onMarch 03, 2018

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

以上这篇vue2.0使用swiper组件实现轮播的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
使用JavaScript破解web
Sep 28 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
Vue的轮播图组件实现方法
Mar 03 #Javascript
在Vue中使用Compass的方法
Mar 02 #Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 #Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 #Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 #Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 #Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 #Javascript
You might like
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
javascript中的new使用
2010/03/20 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
js实现每日自动换一张图片的方法
2015/05/04 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
天游软件面试
2013/11/23 面试题
实习求职信
2013/12/01 职场文书
学徒工职责
2014/03/06 职场文书
公历12个月名称的由来
2022/04/12 杂记
linux目录管理方法介绍
2022/06/01 Servers