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.引用

/*全局引入*/importVueAwesomeSwiperfrom'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'exportdefault{components: {      swiper,      swiperSlide    }

3.使用

就是一般组件的用法

<!--以下看需要添加-->//滚动条//下一项//上一项//标页码

data(){return{swiperOption: {//swiper3autoplay: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,//自动切换的时间间隔，单位msstopOnLastSlide: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:

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