感谢您的反馈！
-
用户反馈
用户反馈
网络异常，请重新提交！
重新提交
| 参数 | 说明 | 类型 | 默认值 |
| adaptiveHeight | 是否使用自适应高度 | Boolean | false |
| animation | 动效类型，默认是'slide' | String/Boolean | 'slide' |
| arrows | 是否显示箭头 | Boolean | true |
| arrowSize | 导航箭头大小 可选值: 'medium', 'large' 可选值: 'medium', 'large' |
Enum | 'medium' |
| arrowPosition | 导航箭头位置 可选值: 'inner', 'outer' 可选值: 'inner', 'outer' |
Enum | 'inner' |
| arrowDirection | 导航箭头的方向 可选值: 'hoz', 'ver' 可选值: 'hoz', 'ver' |
Enum | 'hoz' |
| autoplay | 是否自动播放 | Boolean | false |
| autoplaySpeed | 自动播放的速度 | Number | 3000 |
| centerMode | 是否启用居中模式 | Boolean | false |
| dots | 是否显示导航锚点 | Boolean | true |
| dotsDirection | 导航锚点位置 可选值: 'hoz', 'ver' |
Enum | 'hoz' |
| draggable | 是否可拖拽 | Boolean | true |
| infinite | 是否使用无穷循环模式 | Boolean | true |
| defaultActiveIndex | 初始被激活的轮播图 | Number | 0 |
| lazyLoad | 是否启用懒加载 | Boolean | false |
| slideDirection | 轮播方向 可选值: 'hoz', 'ver' |
Enum | 'hoz' |
| slidesToShow | 同时展示的图片数量 | Number | 1 |
| slidesToScroll | 同时滑动的图片数量 | Number | 1 |
| speed | 轮播速度 | Number | 500 |
| activeIndex | 跳转到指定的轮播图（受控） | Number | - |
| triggerType | 锚点导航触发方式 可选值: 'click', 'hover' |
Enum | 'click' |
| onChange | 轮播切换的回调函数 签名: Function(index: Number) => void 参数: index: {Number} 幻灯片的索引 |
Function | () => {} |
| centerPadding | Side padding when in center mode (px or %); 展示部分为center，pading会产生前后预览 | String | '50px' |
| cssEase | CSS3 Animation Easing,默认‘ease’ | String | 'ease' |
| focusOnSelect | 多图轮播时，点击选中后自动居中 | Boolean | false |
<view class="com-wrap">
<view class="com-title">基本用法</view>
<slider>
<view a:for="{{slides}}" key="{{index}}" class="slider-img-wrapper">
<image class="slider-img" src="{{item.url}}">
</view>
</slider>
<view class="com-title">多图轮播</view>
<!-- <view class="com-sub-title demo-item-title">slide one picture one at a time</view> -->
<slider slidesToShow="4" arrowPosition="outer" dots="false" lazyLoad >
<view class="view-1" style="width: '25%'" a:for="{{slides1}}" key="{{item}}">
<view class="view-sub-1">{{item}}</view>
</view>
</slider>
<!-- <view class="com-sub-title demo-item-title">slide multiple picture one at a time</view>
<slider slidesToShow=2 slidesToScroll=2 arrowPosition="outer" lazyLoad dots="false">
<view class="view-1" style="width: '25%'" a:for="{{slides1}}" key="{{item}}">
<view class="view-sub-1">{{item}}</view>
</view>
</slider> -->
<view class="com-title">垂直滑动</view>
<view style="width: '200px'">
<!-- <view class="demo-item-title">Vertical multi-picture mode</view>
<slider slideDirection="ver" slidesToShow=3 slidesToScroll=1 dots="false" arrowPosition="inner" arrowDirection="ver" class="ver-slick">
<view class="view-1" style="width: '25%'" a:for="{{slides1}}" key="{{item}}">
<view class="custom-slider view-sub-1" style="border: '1px solid transparent'">{{item}}</view>
</view>
</slider>
<view class="demo-item-title">Vertical single-picture mode</view> -->
<slider slideDirection="ver" dots="false" arrowPosition="inner" arrowDirection="ver" class="ver-slick">
<view class="view-1" style="width: '25%'" a:for="{{slides1}}" key="{{item}}">
<view class="custom-slider view-sub-1" style="border: '1px solid transparent'">{{item}}</view>
</view>
</slider>
</view>
<view class="com-title">导航按钮尺寸</view>
<view class="com-sub-title">normal size</view>
<slider>
<view a:for="{{slides}}" key="{{index}}" class="slider-img-wrapper">
<image class="slider-img" src="{{item.url}}">
</view>
</slider>
<view class="com-sub-title">large size</view>
<slider arrowSize="large">
<view a:for="{{slides}}" key="{{index}}" class="slider-img-wrapper">
<image class="slider-img" src="{{item.url}}">
</view>
</slider>
<view class="com-title">锚点方向</view>
<view class="com-sub-title">水平方向</view>
<slider dotsDirection="hoz">
<view a:for="{{slides}}" key="{{index}}" class="slider-img-wrapper">
<image class="slider-img" src="{{item.url}}">
</view>
</slider>
<view class="com-sub-title">垂直方向</view>
<slider dotsDirection="ver">
<view a:for="{{slides}}" key="{{index}}" class="slider-img-wrapper">
<image class="slider-img" src="{{item.url}}">
</view>
</slider>
<view class="com-title">锚点触发方式</view>
<view class="com-sub-title">点击触发</view>
<slider triggerType="click">
<view a:for="{{slides}}" key="{{index}}" class="slider-img-wrapper">
<image class="slider-img" src="{{item.url}}">
</view>
</slider>
<view class="com-sub-title">hover触发</view>
<slider triggerType="hover">
<view a:for="{{slides}}" key="{{index}}" class="slider-img-wrapper">
<image class="slider-img" src="{{item.url}}">
</view>
</slider>
<view class="com-title">导航箭头位置</view>
<slider triggerType="hover" arrowPosition="outer">
<view a:for="{{slides}}" key="{{index}}" class="slider-img-wrapper">
<image class="slider-img" src="{{item.url}}">
</view>
</slider>
<slider triggerType="hover">
<view a:for="{{slides}}" key="{{index}}" class="slider-img-wrapper">
<image class="slider-img" src="{{item.url}}">
</view>
</slider>
<view class="com-title">自动播放</view>
<slider triggerType="hover" autoplay autoplaySpeed="1000">
<view a:for="{{slides}}" key="{{index}}" class="slider-img-wrapper">
<image class="slider-img" src="{{item.url}}">
</view>
</slider>
<slider triggerType="hover" autoplay autoplaySpeed="2000">
<view a:for="{{slides}}" key="{{index}}" class="slider-img-wrapper">
<image class="slider-img" src="{{item.url}}">
</view>
</slider>
</view>