weex-nuke/src/node_modules/nuke-slider/docs/basic.md

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

# Slider basic usage

- order: 0
- title_en: basic usage

基本使用

---
```js
<NukePlayGround>
    renderPics(){
    let body =[];
    this.state.dataList.map((item,index)=>{
        body.push(<View style={[styles.item]}><Image src={item} style={styles.img}></Image></View>)
    })
    return body;
    }

    // ...省略的代码

    <View style={styles.sliderWrap}>
        <Slider
            ref="Slider"
            style={styles.slider}
            width={700}
            height={465}
            autoPlay={true}
            showsPagination={true}
            loop={true}
            index={this.state.index}
            autoplayTimeout="3000"
            paginationStyle={styles.paginationStyle}
            onChange={this.sliderChange}>
            {this.renderPics()}
        </Slider>
    </View>
</NukePlayGround>
```
---

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

const pics = [
'https://img.alicdn.com/tfs/TB1WOqpSVXXXXbiXFXXXXXXXXXX-820-545.jpg',
'https://img.alicdn.com/tfs/TB1bjeTSVXXXXacXXXXXXXXXXXX-820-547.jpg',
'https://img.alicdn.com/tfs/TB10QaMSVXXXXcWXXXXXXXXXXXX-820-546.jpg',
'https://img.alicdn.com/tfs/TB12UujSVXXXXbAXVXXXXXXXXXX-820-546.jpg'
]
let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state = {
            index: 2,
            dataList:[],
        }
    }
    componentDidMount(){
      setTimeout(()=>{
        this.setState({
          dataList:pics
          });
      },2000);
    }
    sliderChange = (e) => {
        this.setState({
            index : e.index
        });
        console.log(e);
    }
    btnClick(){
        this.refs.Slider.slideTo(this.state.index + 1)
    }
    renderPics(){
        let body =[];
        this.state.dataList.map((item,index)=>{
            body.push(<View style={[styles.item]}><Image src={item} style={styles.img}></Image></View>)
        })
        return body;
    }
    render() {
        return (
            <Page title="slider">
                <Page.Intro main="3s 自动轮播"></Page.Intro>
                    <View style={styles.sliderWrap}>
                        <Slider ref="Slider" style={styles.slider} width={700} height={465} autoPlay={true} showsPagination={true}
                    loop={true} index={this.state.index} autoplayTimeout="3000" paginationStyle={styles.paginationStyle}
                    onChange={this.sliderChange}>
                            {this.renderPics()}
                        </Slider>
                    </View>
                <View style={styles.btns}>
                    <Button style={styles.btn} block type="primary" onPress={()=>this.btnClick()}>切换</Button>

                </View>
            </Page>
        );
    }
}
const styles={
    sliderWrap:{
        padding:25,
    },
    slider:{
        overflow:'hidden'
    },
    item:{
        width: 700,
        height: 465,
    },

    paginationStyle:{
        position: 'absolute',
        width: 700,
        height: 100,
        left: 0,
        bottom:0,
        color: 'rgba(255, 255, 255 ,0.5)',
        itemColor: '#ffffff',
        itemSelectedColor: '#3089dc'
    },
    btns:{
        margin:'30rem',
    },
    btn:{
        marginBottom:'30rem'
    },
    img:{
        width:700,
        height:465
    }
}
render(<App/>);


````