Swiper学习笔记(二)

一、swiper初始化中使用的parameters

1.initialSlide——用来设定页面加载完成时,第几张图片先显示出来 

    取值-整数
    默认-0
    0表示第1张  1表示第2张 2表示第3张  。。。以此类推

2.direction——设置slide的滑动方向

    horizontal   水平  默认
    vertical     垂直

3.speed——滑动速度,即slide滑动开始到结束所用的时间(从左到右所用的时间)
    取值举例:500      单位为 ms

4.autoplay——自动切换的时间间隔,不设定该参数,slide不会自动切换

    取值举例:2000 单位 ms

5.autoplayDisableOnInteraction——用户操作swiper之后是否禁止autoplay

     ture  停止   默认
     false  不会停止,但是会重新启动autoplay

6.autoplay

    如果设置为ture,当切换到最后一个slide时停止自动切换(loop模式下无效)
    false  继续切换  默认值

7.grabCursor

    ture  鼠标覆盖Swriper时指针会变成手掌状,拖动时指针会变成抓手形状(根据浏览器有所不同)

    false  默认值

8.autoHeight——自动高度

    ture  wrapper和container会随着当前slider的高度而发生变化
    false  默认值

9.nested

    用于嵌套相同方向的swiper时,当切换到子swiper时停止父swiper的切换。
    请将子swiper的nested设置为ture

    由于需要在slideChangeEnd时判断作用块,因此快速滑动时这个选项无效

二、free Mode(free模式/抵抗反弹)

1.freeMode

    false  普通模式:slide滑动时只滑动一格,并自动贴合wrapper
    ture   free模式:slide会根据惯性滑动且不会自动贴合

2.freeModeMomentum——free模式动量

    false  关闭动量,释放slide之后立即停止不会滑动
    ture   默认值

3.freeModeMomentumRatio——free模式动量值(移动惯量)

    值为number类型,当设置的值越大,释放slide时滑动的距离越大。

4.freeModeMomentumBounce——动量反弹。

    false  禁用free模式下的动量反弹,slide通过惯性滑动到边缘时,无反弹效果
    ture   默认值,有反弹效果

5.freeModeMomentumBounceRatio——动量反弹的动量值

    值越大,产生的边界反弹效果越明显,反弹距离越大。

6.freeModeSticky

    ture  使得freeMode也能自动贴合
    false 默认值

三、slides grid(网格分布)

1.centeredSlides

    ture   活动快居中
    false  活动块居左,默认值

2.slidesPreView

    设置slider容器能够同时显示的slides数量(carousel模式)

    可以设置为number或者  auto
    auto  ——  根据slides的宽度来设定数量

    loop模式下,如果设置为auto,还需设置另外一个参数 loopedSlides

3.slidesPerGroup

    在carousel mode下定义slides的数量多少为一组。

4.slideBetween

    设置slide之间的距离(单位 px)

5.slidesPerColumn

    多行布局里面没列的slide数量

6.slidesPerColumnFill

    多行布局中以什么形式填充:
    'column'(列)
    1     3     5 
    2     4     6
    'row'(行)
    1     2     3   
    4     5     6

7.slidesOffsetBefore

        设置slide与左边框预设偏移量(单位 px)

        类型  number   举例: 100

8.slidesOffsetAfter

        设置slide与右边框的预设偏移量(单位 px)

四、Effects(切换效果)

1.effect——slide的切换效果

    "slide"——位移切换(默认)
    "fade"——淡入
    "cube"——方块
    "coverflow"——3d流
    "flip"——3d翻转

2.fade——fade效果参数。可选参数:crossFade(3.03启用)
    
    false(默认)——关闭淡出。过渡时,源slide透明度为1(不淡出),过度中的slide透明度从0->1(淡入),其他slide透明度为0。
    ture(可选值)——开启淡出。过渡时,源slide透明度从1->0(淡出),过渡中的slide透明度从0->1(淡入),其他slide透明度为0。

    举例:
    effect:'fade',
    fade:{
    crossFade:false
    }

3.cube——效果参数,可选值:

    slideShadows——开启slide阴影。默认ture。
    shadow——开启投影。默认ture。
    shadowOffset——投影距离。默认20,单位px。
    shadowScale投影缩放比例。默认0.94

    举例:
    effect : 'cube',
    cube: {
      slideShadows: true,
      shadow: true,
      shadowOffset: 100,
      shadowScale: 0.6
    }

4.coverflow——cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数,可选值:

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

5.flip——共有两个参数可设置:

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

五、Clicks(点击)

1.preventClicks

    true(默认)——当swiping时组织意外的链接点击。
    false

2.preventClicksPropagation——阻止click冒泡,拖动Swiper时组织click事件。

    true(默认)    false

3.slideToClickedSlide

    true——swiping时点击slide会过度到这个slide
    false(默认)

六、Touches(触发条件)

1.touchRatio——触摸距离与slide滑动距离的比率

    类型:number  默认:1  举例:0.5

    应用实例:利用tuchRatio制作与拖动方向相反的swiper——通过负数

2.simulateTouch

    true(默认)——swiper接受鼠标点击、拖动。
    false

3.onlyExternal

    true——slide无法拖动,只能使用扩展API函数,例如slideNext()或slidePrev()或slideTo()等改变slides滑动
    false(默认)

4.followFinger

    true(默认)
    false——拖动slide时它不会动,当释放slide才会切换

5.shortSwopes

    true(默认)
    false——惊醒快速短距离的拖动无法触发swiper

6.longSwipesRatio——进行longSwipes时触发swiper所需要的最小拖动距离比例,即定义longSwipes距离比例。值越大swiper所需距离越大。最大值0.5

7.threshold——拖动的临界值(单位为px),如果触摸距离小于该值滑块不会被拖动。

8.touchAngle——允许触发拖动的角度值。默认45度,即使触摸方向不是完全水平也能拖动slide。

9.longSwipes

    true(默认)
    false——进行长时间长距离的拖动无法触发Swiper。

10.longSwipesMs——定义longSwipes的时间(单位ms),超过则属于longSwipes。

11.touchMoveStopPropagation

    true(默认)——阻止touchmove冒泡事件。
    false

12.resistance——边缘抵抗。当swiper已经处于第一个或最后一个slide时,继续拖动Swiper会离开边界,释放后弹回。边缘抵抗就是拖离边界时的抵抗力。
    
    false——禁用,将slide拖离边缘时完全没有抗力。
    true(默认),将slide脱离边缘时有抗力,可以通过resistanceRatio设定抵抗力大小。

13.resistanceRatio——抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘,0时完全无法拖离。

    默认0.85
    举例:0.7   0.9   0

14.iOSEdgeSwipeDetection

    true——开启IOS的UIWebView环境下的边缘探测。如果拖动是从屏幕边缘开始则不触发swiper。
    false(默认)

15.iOSEdgeSwipeThreshold——IOS的UIWebView环境下的边缘探测距离。如果拖动小于边缘探测距离则不触发swiper。

    类型:number    默认:20      举例:50
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容

  • Vue-Awesome-Swiper[https://github.com/surmon-china/vue-aw...
    李霖弢阅读 2,557评论 0 0
  • 一了解Swiper Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的...
    尼尼嘎嘎阅读 1,266评论 0 1
  • 我大学学的专业是日语,现在仍然在学。 每次别人问我学的是什么专业的时候,我都会忸怩一下,稍微有些不好意思,小声的说...
    瑞欣的阳台阅读 1,326评论 5 7
  • 好久好久沒有看到油菜花了,下午出門看到田地里的油菜花,真的美極了。 想起油菜花,最初的記憶就是上中學時,家離學校有...
    薛静春阅读 226评论 3 1
  • XeLaTeX/LuaLaTeX 设置 原文:Typesetting With XeLaTeX/LuaLaTeX ...
    布客飞龙阅读 1,100评论 0 3