npm.io
2.3.12 • Published 7 years ago

nuke-scroll-view

Licence
Apache-2.0
Version
2.3.12
Deps
4
Size
75 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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()

    //调用 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
    
  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
    
  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、建议联系 @翊晨
  • 钉钉交流群

Keywords

nukenuke-scroll-view