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 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
JQuery球队选择实例
May 18 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
js实现无缝滚动图
Feb 22 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
js编写简易的计算器
Jul 29 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
小程序自定义轮播图圆点组件
Jun 25 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
详解Python中with语句的用法
2015/04/15 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
如何在python中实现随机选择
2019/11/02 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
速比涛英国官网:Speedo英国
2019/07/15 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
模具专业求职信
2014/06/26 职场文书
2015年端午节活动总结
2015/02/11 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
Python 如何安装Selenium
2021/05/06 Python