vue-awesome-swiper使用

安装 npm install --save vue-awesome-swiper

应用main.js中       import Vue from ‘vue’

                             import VueAwsomeSwiper from 'vue-awsome-swiper'

                              Vue.use（VueAwsomeSwiper）

组件中应用    import {swiper,swiper-slide} from 'vue-awsome-swiper'

组件中引用  components:{slide,swiper-slide}

-------------------------------------------------------

组件使用

<template>

<swiper :options="swiperoption"></swiper>

</template>

data:{

return {

swiperoption：{}中进行配置项

}}

----------------------------------------------------

属性设置  swiperoption中配置项

参考网站https://www.swiper.com.cn/api/index.html

****resistanceRatio 当activeindex为第一个和最后一个时没有反弹效果

****watchOverflow  只有一个时不进行拖动

direction：‘’滑动方向

allowSlidePrev是否可以向左 /向上滑动

allowSlideNext是否可以向右/向下滑动

preventInteractionOnTransition  slide进行过度动画的时候无法滑动

----------------------

touchAngle允许识别的角度

threshold：number拖动距离超过数值时才触发

-----------------------------------

****on 注册事件  touchStart touchMove touchEnd 可以写双指事件

~~~~~~~~~~~~~~~~~~~******tap相当于移动端的点击事件

init初始化

---------------------------------------------------------------------------------

下面的使用率不是很高  按自己需求来

判断图片加载是否完成

preloadImages 强制加载图片

updateOnImagesReady  所有图片加载完

--------------------------------------

centerSlide  中间slide为activeslide

slidePreView可视区放几个slide

spaceBetween 中间空隙

slidesOffsetBefore与左边的偏差

freemode是否贴合

--------------------------------

slide中嵌套点击事件

preventClicks 滑动时阻止点击事件  默认阻止

slideClickedSlide   点击哪个哪个为active slide

--------------------

过渡时无法滑动 preventInteractionOnTransition

设置不可触摸滑动的元素  noSwipingSelector  noSwipingClass   ********不可滑动的元素  slide中嵌套有滚动事件的元素

allowSlideNext  可以滑动到下一个

allowSlidePre

-----------------------------------------------------

*******监听器 obsever 

  样式改动或者slide改动时重新初始化

obseverParent  obseverSlideParent

-------------------------------

事件

init

touchStart

slideChangeTransition

imagesReady

updateOnImageReady

transitionEnd

reachBegining 初始化时

********************getTranslate

********************setTranslate  要结合progress来使用

changeDirection 改变走向

---------------

参数

activeIndex

params 可以重写参数    myswiper.params.speed=1000  ****重写参数  不是所有的参数都可以重写

^disableOnInteraction用户操作swiper时是否会禁止循环播放*******

disableOnInteraction

---

autoplay:boolean   是否自动滑动