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 以保证上一次加载不到数据后,下次还能继续触发 onEndReachedthisrefsscroller1;//省略部分代码<ScrollView ref="scroller1" onEndReached=thisloadmore>this</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
{thisrefsscroller1;};{return<ScrollView ref="scroller1" style=stylesscroller><View style= height: 400 ></View><View style= height: 400 ></View><View style= height: 400 ></View><Button onPress=thisscrollTo> 滑动到 100rem </Button></ScrollView>} - options:
-
scrollToElement(ref,options = {offset:0, animated:true})
当前 ScrollView 实例需要把某个元素滚动到可视区域时
- ref : 元素实例
- options:
- options.offset : 位移偏移量,默认 0
- options.animated: 是否展示滑动动画 , 默认 true
{thisrefsscroller1;};{return<ScrollView ref="scroller1" style=stylesscroller><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=thisscrollToElement> 滑动到指定元素:ref = specialView </Button></ScrollView>}
其他
- bug、建议联系 @翊晨
- 钉钉交流群