Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
nuke-scroll-view
Advanced tools
ScrollView 是一个包装了滚动操作的组件。一般情况下需要一个确定的高度或 flex 1 来保证 ScrollView 的正常展现。
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
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()
//调用 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 实例需要滚动到某个位置时,目前只支持纵向滚动
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 实例需要把某个元素滚动到可视区域时
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>
)
}
FAQs
We found that nuke-scroll-view demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.