ScrollView

• category: Components
• chinese: 滚动组件
• type: Basic

Design

ScrollView is a component that wraps the scrolling operation, which needs a definite height or flex: 1 to show well generally.

API

| Attribute | Description | Type | Default | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | | horizontal | horizontal, or not | boolean | false | | showsHorizontalScrollIndicator | show horizontalScrollIndicator, or not | boolean | true | | showsVerticalScrollIndicator | show verticalScrollIndicator, or not | boolean | true | | onEndReachedThreshold | the offset of loading more | string | 500rem | | onEndReached | event triggered while reaching the end ( when distance to the bottom is equal to onEndReachedThreshold ) | event | null | | scrollEventThrottle | in order to save the flow, there is a frequency that the scroll event is called when scrolling, the default value is 100. | number | 100 | | onScroll | event triggered while scrolling | function |

resetLoadmore Demo Reference

// it will call resetLoadmore to ensure that the onEndReached event will still be triggered the next time even if the data is not loaded.  
this.refs.scroller1.resetLoadmore();

// Omit part of the code
<ScrollView ref="scroller1" onEndReached={this.loadmore}>
    {this.getViews()}
</ScrollView>

This is a method to reset the flag that whether the onEndReached event can be triggered.

The flag default value is true, it means the onEndReached event will be triggered when the target is reaching the end.

The native app will set the flag to false, if the target has triggered the onEndReached event but the content of page scroller becomes more ( or less instead ) without loading more data through the setState.

Call the resetLoadmore to reset the flag so that the onEndReachen event could be triggered again.

The Other

• Chat with @翊晨[yichen] in Dingtalk desktop App Download
• DingTalk Group