swiper滑动容器

2020-12-18 16:14:52  阅读 2269 次 评论 6 条
领券购物省钱,分享好友返佣

swiper

基础库 1.0.0 开始支持,低版本需做兼容处理

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

属性类型默认值必填说明最低版本
indicator-dotsbooleanfalse是否显示面板指示点1.0.0
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色1.1.0
indicator-active-colorcolor#000000当前选中的指示点颜色1.1.0
autoplaybooleanfalse是否自动切换1.0.0
currentnumber0当前所在滑块的 index1.0.0
intervalnumber5000自动切换时间间隔1.0.0
durationnumber500滑动动画时长1.0.0
circularbooleanfalse是否采用衔接滑动1.0.0
verticalbooleanfalse滑动方向是否为纵向1.0.0
previous-marginstring"0px"前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值1.9.0
next-marginstring"0px"后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值1.9.0
snap-to-edgeboolean"false"当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素2.12.1
display-multiple-itemsnumber1同时显示的滑块数量1.9.0
easing-functionstring"default"指定 swiper 切换缓动动画类型2.6.5
bindchangeeventhandle
current 改变时会触发 change 事件,event.detail = {current, source}1.0.0
bindtransitioneventhandle
swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}2.4.3
bindanimationfinisheventhandle
动画结束时会触发 animationfinish 事件,event.detail 同上1.9.0

swiper-item

基础库 1.0.0 开始支持,低版本需做兼容处理

仅可放置在swiper组件中,宽高自动设置为100%。

属性类型默认值必填说明最低版本
item-idstring
该 swiper-item 的标识符1.9.0
skip-hidden-item-layoutbooleanfalse是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息1.9.0


领券购物省钱,分享好友返佣

本文链接:https://qq8652.cn/post/31.html 转载请注明出处!

分享到:
本文地址:https://qq8652.cn/post/31.html
版权声明:本文为原创文章,版权归 自在 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

评论列表

  1. tsSLAueP
    tsSLAueP  @回复

    1

  2. CpjJwWHV
    CpjJwWHV  @回复

    1

  3. 电商会计
    电商会计  @回复

    网站很棒!~~~~

  4. 亚马逊选品工具
    亚马逊选品工具  @回复

    支持,不错的文章