swiper

解释：滑块视图容器。

属性说明：

属性名类型默认值说明最低版本
indicator-dotsBooleanfalse是否显示面板指示点-
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色-
indicator-active-colorColor#333当前选中的指示点颜色件-
autoplayBooleanfalse是否自动切换-
currentNumber0当前所在页面的 index-
current-item-idString“”当前所在滑块的 item-id ，不能与 current 被同时指定1.11
低版本请做兼容性处理
intervalNumber5000自动切换时间间隔-
durationNumber500滑动动画时长-
circularBooleanfalse是否采用衔接滑动-
verticalBooleanfalse滑动方向是否为纵向-
previous-marginString“0px”前边距，可用于露出前一项的一小部分1.11
低版本请做兼容性处理
next-marginString“0px”后边距，可用于露出后一项的一小部分1.11
低版本请做兼容性处理
display-multiple-itemsNumber1同时显示的滑块数量1.11
低版本请做兼容性处理
bindchangeEventHandle-current 改变时会触发 change 事件，event.detail = {current: current, source: source}-
bindanimationfinishEventHandle-动画结束时会触发 animationfinish 事件，event.detail 同上1.11
低版本请做兼容性处理

说明：其中只可放置<swiper-item/>组件，否则会导致未定义的行为。

swiper-item

注意：仅可放置在<swiper/>组件中，宽高自动设置为100%。

属性说明：

属性名类型默认值说明最低版本
item-idString“”该swiper-item的标识符1.11 低版本请做兼容性处理

示例：在开发者工具中预览效果

  1. <swiper indicator-dots="true"
        autoplay="true" interval="3000" duration="500">
        <block s-for="imgUrl in imgs">
            <swiper-item>
                <image src="{{imgUrl}}" class="slide-image" width="355" height="150"/>
            </swiper-item>
        </block>
    </swiper>

  1. Page({
        data: {
            imgs: [
                "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=955704975,2507359007&fm=173&s=32A2DC4D4E12344D4899DCB80300C013&w=218&h=146&img.JPEG",
                "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=984374101,2617012451&fm=173&s=20A24CB176BA0D882C042D700300C092&w=218&h=146&img.JPEG",
                "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1663594687,1286054050&fm=173&s=EAA608C484D2006B5680719A0300E0C1&w=218&h=146&img.JPEG"
            ]
        }
    })

说明：

如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。