图片轮播
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 宽度 | string | '750rem' |
| height | 高度 | string | '352rem' |
| autoplay | 是否自动播放 | boolean | false |
| showsPagination | 是否展示分页 | boolean | true |
| loop | 是否循环播放 | boolean | true |
| autoplayTimeout | 循环播放间隔 | boolean | true |
| paginationStyle | 分页样式 | array | 无 |
| onChange | 分页样式 | array | 无 |
| index | 默认初始化第几个 | string | 0 |
/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text} from 'nuke-components';
import { Slider } from 'nuke';
import {mount} from 'nuke-mounter';
var slideStyle={
step1:{
width: '750rem',
height: '400rem',
backgroundColor: '#e43737',
color: '#ffffff'
},
step2:{
width: '750rem',
height: '400rem',
backgroundColor: '#31363f',
color: '#ffffff',
},
step3:{
width: '750rem',
height: '400rem',
backgroundColor: '#528bff',
color: '#ffffff'
},
paginationStyle:{
position: 'absolute',
width: '690rem',
height: '100rem',
top: '240rem',
left: '20rem',
color: 'rgba(255, 255, 255 ,0.5)'
}
}
let App = class NukeDemoIndex extends Component {
constructor() {
super();
}
sliderChange(e){
}
render() {
return (
<View style={{display:'flex'}} >
<Slider width="750rem" height="600rem"
autoplay="false"
showsPagination="true"
loop="true"
index={2}
autoplayTimeout="3000"
paginationStyle={slideStyle.paginationStyle}
onChange={this.sliderChange.bind(this)}>
<View style={slideStyle.step1}>step1</View>
<View style={slideStyle.step2}>step2</View>
<View style={slideStyle.step3}>step3</View>
</Slider>
</View>
);
}
}
mount(<App/>, mountNode);
