轮播组件，就是以幻灯片的方式，在页面中横向展示诸多内容的组件。 轮播内容相互独立，前后在内容以及数据上都不存在逻辑关系。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| width | string | ‘750rem’ | Slider的宽度（必填） |
| height | string | ‘352rem’ | Slider的高度（必填） |
| autoPlay | bool | false | Slider是否自动播放 |
| showsPagination | bool | true | 是否显示分页的小圆点点 |
| paginationStyle | object | null | 自己定义小圆点点的样式，否则默认样式居中 |
| loop | bool | true | 是否是循环播放 |
| index | number | 0 | 指定默认初始化第几个（在weex安卓下有兼容问题，需要节点渲染完成后异步调用，暂不推荐使用） |
| autoPlayInterval | number | 3000 | 自动播放的间隔时间 |
{
position: 'absolute',
width: props.width,
height: '40rem',
bottom: '20rem',
left: 0,
itemColor: 'rgba(255, 255, 255, 0.5)',
itemSelectedColor: 'rgb(255, 80, 0)',
itemSize: '8rem'
}
| 名称 | 参数 | 描述 |
|---|---|---|
| onChange | none | object{index…} |
| 名称 | 参数 | 描述 |
|---|---|---|
| slideTo | index |
slideTo 方法通过在 Slider 组件上添加 ref 使用，示例：
slideTo(index) {
this.refs.Slider.slideTo(index);
}
本 Demo 演示最基本的 Slider
// demo
import {Component, createElement, render } from 'rax';
const styles = {
container: {
width: 750
},
slider: {
width: '750rem',
position: 'relative',
overflow: 'hidden',
height: '350rem',
backgroundColor: '#cccccc'
},
itemWrap: {
width: '750rem',
height: '252rem'
},
image: {
width: '750rem',
height: '252rem'
},
button: {
marginTop: '20rem',
width: '340rem',
height: '80rem'
},
paginationStyle: {
position: 'absolute',
width: '750rem',
height: '40rem',
bottom: '20rem',
left: 0,
itemColor: 'rgba(255, 255, 255, 0.5)',
itemSelectedColor: 'rgb(255, 80, 0)',
itemSize: '8rem'
},
text: {
fontSize: 50
}
};
class SlideDemo extends Component {
onchange(index) {
console.log('change', index);
}
render() {
return (
<View style={styles.container}>
<Slider className="slider" width="750rem" height="352rem" style={styles.slider}
autoPlay={true}
loop={true}
showsPagination={true}
paginationStyle={styles.paginationStyle}
autoplayTimeout={3000}
onChange={this.onchange.bind(this)}>
<View style={styles.itemWrap}>
<Picture style={styles.image} source={{uri: '//img.alicdn.com/tps/TB1m2LyJFXXXXbHXpXXXXXXXXXX-1125-352.jpg_q50.jpg'}} />
</View>
<View style={styles.itemWrap}>
<Picture style={styles.image} source={{uri: '//img.alicdn.com/tps/TB1ogUvJFXXXXaAXXXXXXXXXXXX-1125-352.jpg_q50.jpg'}} />
</View>
<View style={styles.itemWrap}>
<Picture style={styles.image} source={{uri: '//gw.alicdn.com/tps/i4/TB1pgxYJXXXXXcAXpXXrVZt0FXX-640-200.jpg_q50.jpg'}} />
</View>
<View style={styles.itemWrap}>
<Picture style={styles.image} source={{uri: '//gw.alicdn.com/imgextra/i4/3/TB2STElaohnpuFjSZFPXXb_4XXa_!!3-0-yamato.jpg_q50.jpg'}} />
</View>
</Slider>
</View>
);
}
}
render(<SlideDemo />);
