本人仅在ios设备上测试代码,不确定android是否能使用
原理
ScrollView
在拖拽滚动到时候,会触发onScroll
事件,那么我们就监听这个事件,然后判断位置值,如距离头部、距离底部的距离,然后再进行对应操作。
基础代码
组件:
<ScrollView
scrollEventThrottle={200}
onScroll={this._onScroll.bind(this)}>
<View />
</ScrollView >
这里的
scrollEventThrottle
是设置滚动的敏感值,越大拖拽越敏感(触发事件次数越多)
事件:
_onscroll(evt) {
console.log('[EVT]', evt);
}
我们首先调试打印出事件对象(查看数值),然后再根据功能去进行判断
隐藏状态栏功能
假设,我们当前的
ScrollView
显示的是一篇文章,需要在上滑的时候隐藏状态栏(如果内容超出屏幕范围),下滑到头部的时候显示状态栏
const y = evt['nativeEvent']['contentOffset'].y;
// 如果y < 50,则显示状态栏,否则隐藏
StatusBar.setHidden(y > 50, true);
上拉加载
在查看调试数据evt.nativeEvent
时,可以发现:
-
contentSize
数据值不变,代表此时整个ScrollView
的高度height
、宽度width
-
contentOffset
的y
值变大(回弹的时候变会正常值),如果拉到底,则为一个稳定的值 -
layoutMeasurement
数据不变,代表的是当前屏幕的高度height
、宽度width
contentOffset.y + layoutMeasurement.height = contentSize.height
注意看最后一个发现,当滑动到底部的时候,
contentOffset.y
的值就是整个ScrollView
的高度(contentSize.height
)减去屏幕的高度layoutMeasurement.height
。
也就是,我们通过判断contentOffset.y
的值是否大于ScrollView
的高度减去屏幕的高度,即可知道:是否已经下拉到底部后再继续拖拽
好了,原理已经解释得差不多了,那么我们来用代码实现:
_onScroll(evt) {
const event = evt['nativeEvent'];
// 如果y < 50,则显示状态栏,否则隐藏
StatusBar.setHidden(event['contentOffset']['y'] > 50, true);
// 如果拖拽值超过底部50,且当前的scrollview高度大于屏幕高度,则加载更多
const _num = event['contentSize']['height'] - event['layoutMeasurement']['height'] - event['contentOffset']['y'];
if (event['contentSize']['height'] > event['layoutMeasurement']['height'] && _num < -50) {
console.log('上拉,加载更多评论');
}
}