我们日常开发的时候,经常会遇到上拉加载更多的需求,原因很简单,数据量大的时候分批次加载可提高加载效率,为用户省点流量和时间。
这次我就给大家分享一下我写得 ScrollView (大佬勿喷),本人是在前端道路上越走越远得小菜鸡
言归正传
首先第一步,引入我们得ScrollView
import {ScrollView} from 'react-native';
引入完之后我们开始下面得操作
<ScrollView
style={{flex:1,backgroundColor:'#fff'}}
//触底事件 这个很重要
onMomentumScrollEnd = {this._contentViewScroll}
automaticallyAdjustContentInsets={false}
//是否新显示滚动条
showsVerticalScrollIndicator={false}
scrollsToTop={true}
>
</ScrollView>
下面我们讲一下触底事件得方法
/**
* 上拉触底
*/
_contentViewScroll=(e)=>{
var offsetY = e.nativeEvent.contentOffset.y; //滑动距离
var contentSizeHeight = e.nativeEvent.contentSize.height; //scrollView contentSize高度
var oriageScrollHeight = e.nativeEvent.layoutMeasurement.height; //scrollView高度
if (offsetY + oriageScrollHeight >= contentSizeHeight){
在这里面加入你需要指行得方法和加载数据
}else if(offsetY + oriageScrollHeight <= 1){
//这个是没有数据了然后给了false 得时候还在往上拉
}else if(offsetY == 0){
//这个地方是下拉刷新,意思是到顶了还在指行,可以在这个地方进行处理需要刷新得数据
}
}
关于 FlatList 上拉刷新和下拉加载详解地址
//www.greatytc.com/p/fb3bd2bf898c