weex-nuke/docs/scroll-view/demo/events.md

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

# ScrollView demo 事件

* order: 0

可以滚动到指定位置

---

```js
/** @jsx createElement */
import { View, Text, ScrollView, Button, Modal, Page } from 'weex-nuke';
import { createElement, Component, render } from 'rax';
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      startTime: 0,
      stopTime: 0,
      scrollTime: 0
    };
  }
  getRandomColor() {
    var rgb =
      'rgb(' +
      Math.floor(Math.random() * 255) +
      ',' +
      Math.floor(Math.random() * 255) +
      ',' +
      Math.floor(Math.random() * 255) +
      ')';
    return rgb;
  }
  getViews() {
    let doms = [];
    for (var i = 0; i <= 10; i++) {
      doms.push(
        <View style={[styles.item]}>
          <Text>第{i}个</Text>
        </View>
      );
    }
    return doms;
  }
  scroll = () => {
    this.refs.scroller1.scrollTo({ x: 0, y: 100 });
  };
  scrollHandler = e => {
    this.setState({ scrollTime: this.state.scrollTime + 1 });
  };
  scrollToElement = e => {
    this.refs.scroller1.scrollToElement(this.refs.specialView);
  };
  reset = () => {
    this.refs.scroller1.resetLoadmore();
    Modal.toast('reset loadmore success');
  };
  loadmore = () => {
    Modal.toast('无新增数据');
  };
  render() {
    return (
      <Page title="ScrollView">
        <Page.Intro main="events" />
        <ScrollView
          onScroll={this.scrollHandler}
          ref="scroller1"
          style={styles.scroller}
          onEndReachedThreshold={20}
          onEndReached={this.loadmore}
          onScrollStart={() => {
            this.setState({ startTime: this.state.startTime + 1 });
          }}
          onScrollEnd={() => {
            this.setState({ stopTime: this.state.stopTime + 1 });
          }}
        >
          {this.getViews()}
          <View
            style={{ height: 400, backgroundColor: '#9fb64b' }}
            ref="specialView"
          >
            <Text>special</Text>
          </View>
          <View style={{ height: 400 }}>
            <Text>others</Text>
          </View>
        </ScrollView>
        <View style={{ marginTop: '30rem' }}>
          <Button type="primary" style={styles.btn} block onPress={this.scroll}>
            滑动到指定位移： 100rem
          </Button>

          <Button
            type="primary"
            style={styles.btn}
            block
            onPress={this.scrollToElement}
          >
            滑动到指定元素：ref = specialView
          </Button>

          <Button type="primary" style={styles.btn} block onPress={this.reset}>
            底部拉取不到新增数据时 resetLoadMore 触发再次拉取
          </Button>
          <Text>滚动触发次数 {this.state.scrollTime}</Text>
          <Text>开始次数 {this.state.startTime}</Text>
          <Text>停止次数 {this.state.stopTime}</Text>
        </View>
      </Page>
    );
  }
};
const styles = {
  scroller: {
    backgroundColor: '#ffffff',
    height: '400rem'
  },
  st: {
    paddingTop: '10rem',
    paddingBottom: '10rem',
    paddingLeft: '20rem',
    backgroundColor: '#dddddd'
  },
  stText: {
    fontSize: '36rem'
  },
  item: {
    height: '120rem',
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomStyle: 'solid',
    borderBottomWidth: '1rem',
    borderBottomColor: '#e8e8e8'
  },
  btn: {
    marginBottom: 20
  }
};
render(<App />);
```