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

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

vue项目的package.json中显示的"vue-awesome-swiper": "^2.5.4",用npm install自动安装依赖时装的版本为"version": "2.6.7",而单独安装(npm install vue-awesome-swiper@2.5.4)的则是正常的"version": "2.5.4"

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

并且2.6.7版本swiper位于node_modules/vue-awesome-swiper/node_modules下;2.5.4不需要单独引入样式文件,并且swiper直接位于node_modules文件夹下。

二、基本使用方法

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)说明
autoplayNumber/Boolean0/falseObjectautoplay自动切换
speedNumber300Number300切换速度
loopBooleanfalseBooleanfalseloop模式
loopAdditionalSlidesNumber0Number0loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。
loopedSlidesNumber1Number1在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
directionStringhorizontalStringhorizontalSlides的滑动方向
autoplayDisableOnInteractionBooleantrue用户操作swiper之后,是否禁止autoplay
autoplayStopOnLastBooleantrue切换到最后一个slide时停止自动切换
grabCursorBooleanfalseBooleanfalse鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状
widthNumber-Number-强制Swiper的宽度
heightNumber-Number-强制Swiper的高度
autoHeightBooleanfalseBooleanfalse自动高度
freeMode:swiper3/4 api相同
freeModeBooleanfalse--free模式,slide会根据惯性滑动且不会贴合
freeModeMomentumBooleantrue--free模式动量。若设置为false则关闭动量,释放slide之后立即停止不会滑动。
freeModeMomentumRatioNumber1--free模式动量值(移动惯量)
freeModeMomentumVelocityRatioNumber1--动量反弹
freeModeMomentumBounceBooleantrue--Slides的滑动方向
freeModeMomentumBounceRatioNumber1--值越大产生的边界反弹效果越明显,反弹距离越大。
freeModeStickyBooleanfalse--使得freeMode也能自动贴合。
effect:swiper3/4 api相同
effectStringslide--slide的切换效果。
fade/fadeEffect(4)Objectfade--fade效果参数。
cube/cubeEffectObjectcube--cube效果参数。
coverflow/coverflowEffectObjectcoverflow--coverflow效果参数。
flip/flipEffectObjectflip--flip效果参数。
Zoom:
zoomBooleanfalseObjectzoom焦距功能:双击slide会放大,并且在手机端可双指触摸缩放。
zoomMaxNumber3--最大缩放焦距(放大倍率).
zoomMinNumber1--最小缩放焦距(缩小倍率)。
zoomToggleBooleantrue--设置为false,不允许双击缩放,只允许手机端触摸缩放。
pagination:
paginationString-Objectpagination分页器容器的css选择器或HTML标签
paginationTypeString---bullets’ 圆点(默认)‘fraction’ 分式 ‘progress’ 进度条‘custom’ 自定义
paginationClickableBooleanfalse--点击分页器的指示点分页器控制Swiper切换
paginationHideBooleanfalse--默认分页器会一直显示
paginationElementStringspan--设定分页器指示器(小点)的HTML标签。
Navigation Buttons:swiper4 navigation
nextButtonstring / HTMLElement---前进按钮的css选择器或HTML元素。
prevtButtonstring / HTMLElement---后退按钮的css选择器或HTML元素。
Scrollbar:
scrollbarstring / HTMLElement-Objectswiper4 ScrollbarScrollbar容器的css选择器或HTML元素
scrollbarHideBoleantrue--滚动条是否自动隐藏。
scrollbarDraggableBooleanfalse--该参数设置为true时允许拖动滚动条。
scrollbarSnapOnReleaseBooleanfalse--如果设置为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)。
   },
原文链接:segmentfault.com

上一篇:JS defineProperty and prototype
下一篇:Angular automatically add &apos;ng-invalid&apos; class on &apos;required&apos; fields

相关推荐

  • 高阶组件 + New Context API = ?

    1. 前言 继上次小试牛刀(https://github.com/SmallStoneSK/Blog/issues/6)尝到高价组件的甜头之后,现已深陷其中无法自拔。。。

    2 年前
  • 面试!你真的准备好了吗?|手写API系列梳理

    "不畏惧,不讲究,未来的日子好好努力"——大家好!我是小芝麻😄 标题党,它又、又、又来了...... (/public/upload/ce1d43cfb86634a10b9c8a07be33...

    22 天前
  • 除了composition API,vue3.0文档又带来了什么新东西?

    (/public/upload/bceee5bf249edce49d803dcfff22199b) 异步组件 在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器...

    15 天前
  • 重构 - 设计API的扩展机制

    1.前言 上篇文章,主要介绍了重构的一些概念和一些简单的实例。这一次,详细的说下项目中的一个重构场景给API设计扩展机制。目的就是为了方便以后能灵活应对需求的改变。

    2 年前
  • 重新开坑,在 react 中使用 composition API

    emmm大家好,那个,虽然最近新型肺炎,搞的人心惶惶,没啥动力写码 其实我也没啥可写的了,但是闲着也是闲着,然后记起来 smox 弃坑了还有一堆星星,想着怎么重新开坑 背景 smox 弃坑,不是我任性...

    6 个月前
  • 那些年,那些坑--swiper loop:true引发绑定dom的click事件无效及解决方案

    对于 ,只要做过轮播图的童鞋应该都再熟悉不过了。这是一个很强大的图片轮播插件,本身无任何第三方库依赖,即插即用。api 文档很清晰,所以很快能够上手。但是,再好的插件也会出现令人不愉快的地方,当然,今...

    2 年前
  • 轮播组件swiper设置属性loop:true时的必经之路

    在维护且一直看不惯的项目终于在UI改版之际申请了重构。终于可以按照自己的构思写,一切都如此地美好。上线前,甲方爸爸要求首页的轮播图要加循环。然后,就碰到了这个问题~ 先简单介绍下项目,这是一个To...

    4 个月前
  • 足球特殊指数api接口示例

    分享下足球特殊指数数据,单双、总进球数、半全场赔率api接口示例,详情查看在线文档(https://www.shenlu88.com/doc.html) 接口返回的是Json数据,可以使用fastjs...

    8 个月前
  • 足球冠军指数 api接口示例

    分享下足球冠军指数API数据,接口示例如下,可查看在线文档(https://www.shenlu88.com/doc.... 接口返回的是Json数据,可以使用fastjson来解析 API...

    5 个月前
  • 超火js库: Lodash API例子 (持续更新~~~)

    lodash.js是一款超火的js库,在npm上平均周下载量达到了惊人的,github start大量框架都用到了lodash,包括拥有start的vue 本文对比英文文档,加上一些小栗子和个...

    2 年前

官方社区

扫码加入 JavaScript 社区