vue-awesome-swiper的使用以及API整理

2018-04-26 admin

一、先说一个看关于vue-awesome-swiper的一个坑

vue项目的package.json中显示的<span style=“color: orange;”>“vue-awesome-swiper”: “^2.5.4”</span>,用<span style=“color: orange;”>npm install</span>自动安装依赖时装的版本为<span style=“color: orange;”>“version”: “2.6.7”</span>,而单独安装(<span style=“color: orange;”>npm install vue-awesome-swiper@2.5.4</span>)的则是正常的<span style=“color: orange;”>“version”: “2.5.4”</span>。

这两个版本都是基于swiper3的,从官网上swiper3的教程来看并不需要单独引入样式文件,而2.6.7版本需要单独引入swiper/dist/css目录下的swiper.css样式文件(类似于swiper4)。

并且2.6.7版本swiper位于<span style=“color: orange;”>node_modules/vue-awesome-swiper/node_modules</span>下;2.5.4不需要单独引入样式文件,并且swiper直接位于<span style=“color: orange;”>node_modules</span>文件夹下。

二、基本使用方法

1.安装(略)

2.引用

    /*全局引入*/
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
    Vue.use(VueAwesomeSwiper, /* { default global options } */)
    /*组件方式引用*/
    import 'swiper/dist/css/swiper.css'////这里注意具体看使用的版本是否需要引入样式,以及具体位置。
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
    components: {
      swiper,
      swiperSlide
    }

3.使用

就是一般组件的用法

    <swiper :options="swiperOption">
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
    </swiper>
    <!--以下看需要添加-->
    <div class="swiper-scrollbar"></div> //滚动条
    <div class="swiper-button-next"></div> //下一项
    <div class="swiper-button-prev"></div> //上一项
    <div class="swiper-pagination"></div> //标页码
  data(){
    return{
      swiperOption: {//swiper3
      autoplay: 3000,
      speed: 1000,
      }
    }
  }

三、配置

参数 类型(swiper3) 默认值(swiper3) 类型(swiper4) 默认值(swiper4) 说明
autoplay Number/Boolean 0/false Object autoplay 自动切换
speed Number 300 Number 300 切换速度
loop Boolean false Boolean false loop模式
loopAdditionalSlides Number 0 Number 0 loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。
loopedSlides Number 1 Number 1 在loop模式下使用slidesPerview:‘auto’,还需使用该参数设置所要用到的loop个数。
direction String horizontal String horizontal Slides的滑动方向
autoplayDisableOnInteraction Boolean true 用户操作swiper之后,是否禁止autoplay
autoplayStopOnLast Boolean true 切换到最后一个slide时停止自动切换
grabCursor Boolean false Boolean false 鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状
width Number - Number - 强制Swiper的宽度
height Number - Number - 强制Swiper的高度
autoHeight Boolean false Boolean false 自动高度
<span style=“color:red;font-size: 20px;”>freeMode:</span> <span style=“color:red;”>swiper3/4 api相同</span>
freeMode Boolean false - - free模式,slide会根据惯性滑动且不会贴合
freeModeMomentum Boolean true - - free模式动量。若设置为false则关闭动量,释放slide之后立即停止不会滑动。
freeModeMomentumRatio Number 1 - - free模式动量值(移动惯量)
freeModeMomentumVelocityRatio Number 1 - - 动量反弹
freeModeMomentumBounce Boolean true - - Slides的滑动方向
freeModeMomentumBounceRatio Number 1 - - 值越大产生的边界反弹效果越明显,反弹距离越大。
freeModeSticky Boolean false - - 使得freeMode也能自动贴合。
<span style=“color:red;font-size: 20px;”>effect:</span> <span style=“color:red;”>swiper3/4 api相同</span>
effect String slide - - slide的切换效果。
fade/fadeEffect(4) Object fade - - fade效果参数。
cube/cubeEffect Object cube - - cube效果参数。
coverflow/coverflowEffect Object coverflow - - coverflow效果参数。
flip/flipEffect Object flip - - flip效果参数。
<span style=“color:red;font-size: 20px;”>Zoom:</span>
zoom Boolean false Object zoom 焦距功能:双击slide会放大,并且在手机端可双指触摸缩放。
zoomMax Number 3 - - 最大缩放焦距(放大倍率).
zoomMin Number 1 - - 最小缩放焦距(缩小倍率)。
zoomToggle Boolean true - - 设置为false,不允许双击缩放,只允许手机端触摸缩放。
<span style=“color:red;font-size: 20px;”>pagination:</span>
pagination String - Object pagination 分页器容器的css选择器或HTML标签
paginationType String - - - bullets’ 圆点(默认)‘fraction’ 分式 ‘progress’ 进度条‘custom’ 自定义
paginationClickable Boolean false - - 点击分页器的指示点分页器控制Swiper切换
paginationHide Boolean false - - 默认分页器会一直显示
paginationElement String span - - 设定分页器指示器(小点)的HTML标签。
<span style=“color:red;font-size: 20px;”>Navigation Buttons:</span> swiper4 navigation
nextButton string / HTMLElement - - - 前进按钮的css选择器或HTML元素。
prevtButton string / HTMLElement - - - 后退按钮的css选择器或HTML元素。
<span style=“color:red;font-size: 20px;”>Scrollbar:</span>
scrollbar string / HTMLElement - Object swiper4 Scrollbar Scrollbar容器的css选择器或HTML元素
scrollbarHide Bolean true - - 滚动条是否自动隐藏。
scrollbarDraggable Boolean false - - 该参数设置为true时允许拖动滚动条。
scrollbarSnapOnRelease Boolean false - - 如果设置为true,释放滚动条时slide自动贴合。

autoplay:

  autoplay: {
    delay: 3000, //自动切换的时间间隔,单位ms
    stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
    stopOnLastSlide: true, //如果设置为true,当切换到最后一个slide时停止自动切换。
    disableOnInteraction: true, //用户操作swiper之后,是否禁止autoplay。
    reverseDirection: true, //开启反向自动轮播。
    waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
  },

fade:

  fadeEffect: {
    crossFade: false,
  }

cube:

  cubeEffect: {
    slideShadows: true, //开启slide阴影。默认 true。
    shadow: true, //开启投影。默认 true。
    shadowOffset: 100, //投影距离。默认 20,单位px。
    shadowScale: 0.6 //投影缩放比例。默认0.94。
  },

coverflow:

  coverflowEffect: {
    rotate: 30, //slide做3d旋转时Y轴的旋转角度。默认50。
    stretch: 10, //每个slide之间的拉伸值,越大slide靠得越紧。 默认0。
    depth: 60, //slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。
    modifier: 2, //depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。
    slideShadows : true //开启slide阴影。默认 true。
  },

flip:

   flipEffect: {
    slideShadows : true, //slides的阴影。默认true。
    limitRotation : true, //限制最大旋转角度为180度,默认true。
  }

zoom:

   zoom: {
     maxRatio: 5, //最大倍数
     minRatio: 2, //最小倍数
     toggle: false, //不允许双击缩放,只允许手机端触摸缩放。
     containerClass: 'my-zoom-container', //zoom container 类名
   },
   navigation: {
    nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
    prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
    hideOnClick: true, //点击slide时显示/隐藏按钮
    disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
    hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
   },

pagination:

   pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    //type: 'fraction',
    //type : 'progressbar',
    //type : 'custom',
    progressbarOpposite: true, //使进度条分页器与Swiper的direction参数相反
    bulletElement : 'li', //设定分页器指示器(小点)的HTML标签。
    dynamicBullets: true,  //动态分页器,当你的slide很多时,开启后,分页器小点的数量会部分隐藏。
    dynamicMainBullets: 2, //动态分页器的主指示点的数量
    hideOnClick: true, //默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。
    clickable: true, //此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。

  },

Scrollbar:

   scrollbar: {
     el: '.swiper-scrollbar',
     hide: true, //滚动条是否自动隐藏。默认:false,不会自动隐藏。
     draggable: true, //该参数设置为true时允许拖动滚动条。
     snapOnRelease: true, //如果设置为false,释放滚动条时slide不会自动贴合。
     dragSize: 30, //设置滚动条指示的尺寸。默认'auto': 自动,或者设置num(px)。
   },

[转载]原文链接:https://segmentfault.com/a/1190000014609379

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-31069.html

文章标题:vue-awesome-swiper的使用以及API整理

相关文章
bootstrap PrintThis打印插件使用详解
bootstrap PrintThis打印效果图: 如图,这个是调用了谷歌的打印,使用很方便,可以自己調样式,需要的可以研究一下,这边贴出使用方法。 附上GitHub:https://github.com/jasonday/printTh...
2017-03-16
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
回到顶部