weex-nuke/lib/node_modules/nuke-slider/docs/advance.md

基于 Rax 、Weex 的高性能组件体系 ~~

# 自定义dot的slider 使用

- order: 2
- hide: true

通过 paginationStyle 可自行设定 dot 的显示样式。

---

````js
'use strict';
/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Slider from 'nuke-slider';

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: '750rem',
        height: '100rem',
        top : '400rem',
        backgroundColor: 'yellow',
        itemSize:40,
        itemColor: 'red',
        itemSelectedColor: 'green'
    }
}
let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
    }

    sliderChange(e){
        console.log(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}>
                            <View>内嵌页面1</View>
                       </View>
                       <View style={slideStyle.step2}>
                            <View>内嵌页面2</View>
                        </View>
                       <View style={slideStyle.step3}>
                            <View>内嵌页面3</View>
                        </View>
                     </Slider>
           </View>
        );
    }
}

render(<App/>);

````