Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
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
The npm package nuke-scroll-view receives a total of 31 weekly downloads. As such, nuke-scroll-view popularity was classified as not popular.
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.