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

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

# 非第一帧渲染

- order: 1
- hide: true

初始化非第一帧为首屏，在 android 设备上长列表的首屏时间可能因内容节点层次延长。

---

````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: '690rem',
        height: '100rem',
        top : '240rem',
        left: '20rem',
        color: 'rgba(255, 255, 255 ,0.5)',
        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"
             append="tree"
             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>
        );
    }
}

render(<App/>);

````