nuke-scroll-view

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