本人僅在ios設備上測試代碼,不確定android是否能使用
原理
ScrollView
在拖拽滾動到時候,會觸發(fā)onScroll
事件,那么我們就監(jiān)聽這個事件,然后判斷位置值,如距離頭部、距離底部的距離,然后再進行對應操作。
基礎代碼
組件:
<ScrollView
scrollEventThrottle={200}
onScroll={this._onScroll.bind(this)}>
<View />
</ScrollView >
這里的
scrollEventThrottle
是設置滾動的敏感值,越大拖拽越敏感(觸發(fā)事件次數(shù)越多)
事件:
_onscroll(evt) {
console.log('[EVT]', evt);
}
我們首先調(diào)試打印出事件對象(查看數(shù)值),然后再根據(jù)功能去進行判斷
隱藏狀態(tài)欄功能
假設,我們當前的
ScrollView
顯示的是一篇文章,需要在上滑的時候隱藏狀態(tài)欄(如果內(nèi)容超出屏幕范圍),下滑到頭部的時候顯示狀態(tài)欄
const y = evt['nativeEvent']['contentOffset'].y;
// 如果y < 50,則顯示狀態(tài)欄,否則隱藏
StatusBar.setHidden(y > 50, true);
上拉加載
在查看調(diào)試數(shù)據(jù)evt.nativeEvent
時,可以發(fā)現(xiàn):
-
contentSize
數(shù)據(jù)值不變,代表此時整個ScrollView
的高度height
、寬度width
-
contentOffset
的y
值變大(回彈的時候變會正常值),如果拉到底,則為一個穩(wěn)定的值 -
layoutMeasurement
數(shù)據(jù)不變,代表的是當前屏幕的高度height
、寬度width
contentOffset.y + layoutMeasurement.height = contentSize.height
注意看最后一個發(fā)現(xiàn),當滑動到底部的時候,
contentOffset.y
的值就是整個ScrollView
的高度(contentSize.height
)減去屏幕的高度layoutMeasurement.height
。
也就是,我們通過判斷contentOffset.y
的值是否大于ScrollView
的高度減去屏幕的高度,即可知道:是否已經(jīng)下拉到底部后再繼續(xù)拖拽
好了,原理已經(jīng)解釋得差不多了,那么我們來用代碼實現(xiàn):
_onScroll(evt) {
const event = evt['nativeEvent'];
// 如果y < 50,則顯示狀態(tài)欄,否則隱藏
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('上拉,加載更多評論');
}
}