# Swipe 上下左右的手势

- order: 0
- title_en: up and down, left and right

上下左右手势

---
```js
<NukePlayGround>
  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
    });
  }

  <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>
</NukePlayGround>
```
---

```js
/** @jsx createElement */
import { Component, createElement, render } from 'rax';
import Text from 'nuke-text';
import View from 'nuke-view';
import Swipe from 'nuke-swipe';

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 />);
```