## data 传入的数据 data 内部的 type 支持 `'img'` 和 `'component'`,其中 `img` 类型需要传入图片 url,`component` 类型时传入单文件组件,Swiper 内部将会根据 type 渲染对应内容。 ## interval && duration 为了书写方便,注意间隔时间 interval 以秒为单位,过渡时间 duration 以毫秒为单位,同时需要注意传入的过渡时间必须小于间隔时间。 ## indicateStyle 此参数配置指示器的样式,当 `indicateStyle` 为 `longLine` 时,激活的指示器会在 Swiper 停留时间内表示间隔进度,请参考示例。 ## indicateInjClass 此参数可以对指示器 indicate 区域注入 CSS 名称(不仅限于 Tailwind CSS),比如示例中去除默认自带透明度的渐变色背景。 若注入的 class 没生效,请在注入的 class 名称前添加“!” ,可参考 [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier)。 ## aspectRatio && containerWidth && px&& py containerWidth 若不传或为 0,Swiper 内部默认使用页面宽度作为此组件区域宽度。而此区域高度将通过 containerWidth 与 aspectRatio 计算出来。 注意,aspectRatio 仅仅决定容器的宽高比,所以只有当 px 和 py 一致时,每个容器内部显示区域宽高比才会与 aspectRatio 一致。 ## 未激活容器偏移与旋转 通过对 X、Z 两个方向上的偏移值和 X、Y、Z 三个旋转轴旋转角度的设置,可以让未激活的容器在对应轴进行偏移与旋转,从而实现一些特殊的切换过渡效果,请参考示例。 注意,偏移值以像素(px)为单位,而旋转角度以度(deg)为单位。 ## activeInjClass && notActiveInjClass 通过对激活和未激活的容器注入 Class,可以让不同状态的容器有不同的样式, ## radius && innerInjClass 这是对容器内部区域的圆角设置与注入 Class,请参考示例。 ## onclick 事件 点击事件仅仅在传入图片时生效,传入组件时事件由传入的组件内部决定。 ## 滑动事件 当手指或其他触摸设备在 Swiper 容器内滑动结束时,Swiper 会结合滑动距离与滑动速度判断本次滑动是否触发切换,若触发则会根据滑动方向切换到上一个或下一个容器。 - 当滑动距离小于某个阈值时,始终不触发切换。 - 当滑动距离大于某个阈值时,始终触发切换。 - 当滑动距离介于两个阈值之间时,会根据滑动速度判断是否触发切换,速度大于某个速度系数时会触发切换。 上述三种情况的阈值和速度系数可以通过 triggerLong、notTriggerLong 和 triggerSpeed 参数进行自定义。其中 triggerLong 和 notTriggerLong 为百分比,表示滑动距离占容器宽度的百分比;triggerSpeed 为 0-1 之间的小数,表示滑动速度系数。 ## lazyplay Swiper 自动轮播时有一系列过渡动画,当页面同时有大量过渡效果时,考虑到设备性能与动画帧率等问题,Swiper 默认会开启懒轮播,即 Swiper 组件**不在页面可视范围内时会暂停自动轮播**,当然你也可以单独设置。 下面两张图展示了极端情况下,同一个页面存在 30+ Swiper 同时轮播时,桌面端浏览器处理大量过渡动画时的性能监视图对比。 - 未开启懒轮播,同时会有 30+ 组过渡动画在进行时的性能监视图。 lazyplay_no - 已开启懒轮播,同时只有 3-4 组过渡动画在进行时的性能监视图。 lazyplay_yes