# Swipe demo

- order: 0

上下左右手势

---

````js
/** @jsx createElement */
import {Component, createElement,render} from 'rax';
import Text from 'nuke-text';
import View from 'nuke-view';
import Swipe from 'nuke-swipe';
<<<<<<< HEAD
import Page from 'nuke-page';
=======
import BizPage from 'nuke-page';
>>>>>>> 725a9adbb9ea23bdb3a54477a26521fa7c8ebc64

class SwipeDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      direction: '',
      distance: 0,
      velocity: 0
    }
  }
  onSwipeBegin({ direction, distance, velocity }) {
    console.log('begin', direction, distance, velocity);
  }

  onSwipe(){
    console.log('swipe');
  }

  onSwipeEnd({ direction, distance, velocity }) {
    console.log('end', direction, distance, velocity);
    this.setState({
      direction: direction,
      distance: distance,
      velocity: velocity
    })
  }
  render() {
    return (
          <View>
                <Swipe style={styles.swipeWrap} onSwipeBegin={this.onSwipeBegin.bind(this)} onSwipe={this.onSwipe.bind(this)} onSwipeEnd={this.onSwipeEnd.bind(this)}>
                  <Text style={styles['text']}>direction: {this.state.direction}</Text>
                  <Text style={styles['text']}>distance: {this.state.distance}</Text>
                  <Text style={styles['text']}>velocity: {this.state.velocity}</Text>
                </Swipe>
             </View>
        );
    }
}
const styles={
  swipeWrap:{
    height:1000,
    backgroundColor: '#3089dc',
    justifyContent:'center',
    alignItems:'center'
  },
  text:{
    color:'#ffffff',
    fontSize:28
  }
}
render(<SwipeDemo />);


````