# ScrollView

* category: Components
* chinese: 滚动组件
* type: 基本

---

ScrollView 是一个包装了滚动操作的组件。一般情况下需要一个确定的高度或 flex 1 来保证 ScrollView 的正常展现。

## API

| 属性                                   | 说明                                                                                         | 类型          | 默认值 |
| -------------------------------------- | -------------------------------------------------------------------------------------------- | ------------- | ------ |
| horizontal                             | 是否横向                                                                                     | boolean       | false  |
| showScrollBar                          | 是否显示滚动条                                                                               | boolean       | true   |
| showsHorizontalScrollIndicator【废弃】 | 是否显示水平滚动条                                                                           | boolean       | true   |
| showsVerticalScrollIndicator 【废弃】  | 是否显示垂直滚动条                                                                           | boolean       | true   |
| onEndReachedThreshold                  | 设置加载更多的偏移                                                                           | string        | 500rem |
| onEndReached                           | 滚动到底部时的事件（ 距离底部 onEndReachedThreshold 长度时触发)                              | event         | 无     |
| scrollEventThrottle                    | 在滚动过程中，scroll 事件被调用的频率（默认值为 100），用于滚动的节流                        | number        | 100    |
| onScroll                               | 滚动时触发的事件                                                                             | function      |
| onScrollStart                          | 滚动开始时触发的事件                                                                         | function      |
| onScrollEnd                            | 滚动结束时触发的事件                                                                         | function      |
| style                                  | 容器样式                                                                                     | object        | 无     |
| contentContainerStyle                  | 容器内部 container 样式                                                                      | 无            |
| id                                     | scrollview 标识，如果页面存在多个 ScrollView，且需要使用下拉刷新组件，则必须添加 id 作为标识 | 'scroller_rv' |

#### 实例方法

- **resetLoadmore()**

  ```js
  //调用 resetLoadmore 以保证上一次加载不到数据后，下次还能继续触发 onEndReached
  this.refs.scroller1.resetLoadmore();

  //省略部分代码
  <ScrollView ref="scroller1" onEndReached={this.loadmore}>
    {this.getViews()}
  </ScrollView>;
  ```

  这是一个重置 `onEndReached 是否能触发的` 标记位的方法。标记位默认为 true，即滚动到底部即可触发 onEndReached 事件。但**当 onEndReached 触发后，没有通过 setState 增加数据导致页面 scroller 内容变长，（或者反而变短了），native 端会将标记位设置为 false。**
  此时调用 resetLoadmore ，可以清除标记位，让 onEndReached 可以再次触发。

- **scrollTo(options = { y: 0, animated: true})**

  当前 ScrollView 实例需要滚动到某个位置时，目前只支持纵向滚动

  - options:
    - options.y : 位移偏移量，默认 0
    - options.animated: 是否展示滑动动画 , 默认 true

  ```js

    scrollTo = e => {
      this.refs.scroller1.scrollTo({ y : 100 });
    };
    render(){
      return (
        <ScrollView ref="scroller1" style={styles.scroller}>
          <View style={{ height: 400 }}></View>
          <View style={{ height: 400 }}></View>
          <View style={{ height: 400 }}></View>
          <Button onPress={this.scrollTo}> 滑动到 100rem </Button>
        </ScrollView>
      )
    }
  ```

- **scrollToElement(ref,options = {offset:0, animated:true})**

  当前 ScrollView 实例需要把某个元素滚动到可视区域时

  - ref : 元素实例
  - options:
    - options.offset : 位移偏移量，默认 0
    - options.animated: 是否展示滑动动画 , 默认 true

  ```js

    scrollToElement = e => {
      this.refs.scroller1.scrollToElement(this.refs.specialView);
    };
    render(){
      return (
        <ScrollView ref="scroller1" style={styles.scroller}>
          <View style={{ height: 400 }}></View>
          <View style={{ height: 400 }}></View>
          <View style={{ height: 400 }} ref="specialView"><Text> hi, I am special </Text></View>
          <View style={{ height: 400 }}></View>
          <Button onPress={this.scrollToElement}> 滑动到指定元素：ref = specialView </Button>
        </ScrollView>
      )
    }
  ```