# nuke-scroll-view

> 滚动组件

Latest version **2.3.12** (published 2019-09-26) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install nuke-scroll-view
pnpm add nuke-scroll-view
yarn add nuke-scroll-view
bun add nuke-scroll-view
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.12 |
| Published | 2019-09-26 |
| First published | 2017-05-10 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 75 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | leanhunter |
| Maintainers | doub, leanhunter |
| Keywords | nuke, nuke-scroll-view |

## Links

- npm: https://www.npmjs.com/package/nuke-scroll-view
- Repository: git@gitlab.alibaba-inc.com:nuke/scroll-view
- npm.io page: https://npm.io/package/nuke-scroll-view

## Dependencies (4)

- [nuke-env](https://npm.io/package/nuke-env.md) ^2.3.12
- [nuke-text](https://npm.io/package/nuke-text.md) ^2.3.12
- [nuke-view](https://npm.io/package/nuke-view.md) ^2.3.12
- [nuke-refresh-control](https://npm.io/package/nuke-refresh-control.md) ^2.3.12

## Recent versions

- 2.3.12 (latest) — 2019-09-26
- 2.1.3 (beta) — 2018-08-15
- 2.3.11 — 2019-09-26
- 2.3.10 — 2019-09-26
- 2.3.8 — 2019-09-25
- 2.3.7 — 2019-07-24
- 2.3.6 — 2019-07-19
- 2.3.5 — 2019-07-02
- 2.3.4 — 2019-05-10
- 2.3.3 — 2019-04-28
- 2.3.2 — 2019-01-15
- 2.3.0 — 2018-11-14
- 0.0.4 — 2018-10-29
- 2.2.29 — 2018-10-09
- 2.2.28 — 2018-10-09
- … 46 more at https://npm.io/package/nuke-scroll-view/versions

## README

# 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>
      )
    }
  ```

## 其他
- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />

---
_Source: https://npm.io/package/nuke-scroll-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._