ReactNative ScrollView 實現(xiàn)上拉加載/下拉刷新功能

本人僅在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
  • contentOffsety值變大(回彈的時候變會正常值),如果拉到底,則為一個穩(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('上拉,加載更多評論');
  }
}
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容