【react native】Flatlist实现上拉滚动加载

参考博客：React Native FlatList上拉加载、FlatList

enum FooterType {Null = 0,NoData = 1,LoadingData = 2,
}export default function CaseList() {const [caseData, setCaseData] = useState<CaseItem[]>([]);const [limit, setLimit] = useState<number>(1);const [isFoot, setIsFoot] = useState<FooterType>(FooterType.Null);const getCaseData = async () => {try {// 如果数据已经全部加载完成，则不再请求接口if (isFoot === FooterType.NoData) return;setIsFoot(FooterType.LoadingData);const res = await getCaseLists({ limit });// 之前 caseData 数据也需要一起存放起来const result = [...caseData, ...res.data];setCaseData(result);const isLoadEnd = result.length >= res?.total;if (isLoadEnd) {// 数据加载完成setIsFoot(FooterType.NoData);}} catch (err) {console.warn('err:', err);}};const { run } = useRequest(getCaseData, {debounceWait: 300,manual: true,});useEffect(() => {run();}, [limit]);const renderCaseItem = ({ item }: { item: CaseItem }) => {const { case_name: title, steps, update_time: time, isStar } = item;return (<TouchableOpacity onPress={() => {}} style={styles.itemView}><View style={styles.leftItemView}><Text style={styles.title} numberOfLines={1}>{title}</Text><Text style={[styles.subTitle, styles.remarkText]} numberOfLines={1}>{steps}</Text></View><View style={styles.rightItemView}>{isStar ? <Image source={icStarSolid} style={styles.icon} /> : null}<Imagesource={icRightShape}style={[styles.icon, styles.rightShapeIcon]}/></View></TouchableOpacity>);};const renderListFooter = () => {if (isFoot === FooterType.NoData) {return (<View style={styles.footerView}><Text style={styles.footerText}>End</Text></View>);}if (isFoot === FooterType.LoadingData) {return (<View style={styles.footerView}><ActivityIndicator /><Text style={styles.footerText}>Loading...</Text></View>);}return null;};return (<View style={styles.flatlistView}><FlatListdata={caseData}renderItem={renderCaseItem}keyExtractor={item => `${item.id}+${item.case_name}`}onEndReached={() => setLimit(limit + 1)} // limit变化，会触发接口调用onEndReachedThreshold={0.1} // 决定当距离内容最底部还有多远时触发onEndReached回调ListFooterComponent={renderListFooter()}  // 决定底部展示什么。end & loading··· 状态ListEmptyComponent={<Empty />}/></View>);
}const styles = StyleSheet.create({flatlistView: {height: WINDOW_HEIGHT - 320, // 一定要有一个高度},searchInput: {backgroundColor: '#F5F5F5',borderColor: '#F5F5F5',},icon: {width: 14,height: 14,},itemView: {display: 'flex',flexDirection: 'row',justifyContent: 'space-between',paddingLeft: 10,paddingRight: 10,borderTopColor: 'rgba(0, 0, 0, 0.09)',borderTopWidth: 1,height: 60,},leftItemView: {width: 280,overflow: 'hidden',alignSelf: 'center',},rightItemView: {display: 'flex',flexDirection: 'row',justifyContent: 'flex-end',alignItems: 'center',},title: {fontWeight: '500',fontSize: 14,lineHeight: 20,color: 'rgba(0, 0, 0, 0.87)',},subTitle: {fontWeight: '400',fontSize: 12,lineHeight: 14,color: 'rgba(0, 0, 0, 0.54)',},remarkText: {marginTop: 5,},rightShapeIcon: {marginLeft: 8,width: 6.15,height: 11.71,},bottomSheetContentView: {},sheetContentTitle: {marginTop: 5,},sheetContentsubTitle: {marginTop: 5,},timeView: {display: 'flex',flexDirection: 'row',alignItems: 'center',justifyContent: 'flex-start',marginTop: 12,marginBottom: 8,},timeIcon: {width: 12,height: 12,marginRight: 5,},timeText: {},bottomSheetFooterView: {display: 'flex',flexDirection: 'row',alignItems: 'center',justifyContent: 'space-between',},sheetStarIcon: {width: 24,height: 24,},sheetButton: {width: 300,},footerView: {alignItems: 'center',justifyContent: 'center',},footerText: {fontSize: 12,color: 'rgba(0, 0, 0, 0.26)',},
});

注意事项：

当 FlatList 容器无法滚动的时候，外包一层View，并设置一个宽度。
FlatList 组件的data表示的是列表中所有数据，所以对于接口返回的数据，需要[...data, ...result]操作。

效果：

【react native】Flatlist实现上拉滚动加载相关推荐

如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
php下拉上滑分页,Flutter实现下拉刷新上拉分页加载更多
一.Flutter实现下拉刷新和上拉分页加载更多在Flutter官方sdk中给我们提供了下拉刷新的组件RefreshIndicator.但是没有提供上拉分页加载更多的组件.但是在Flutter Li ...
【Vue学习总结】22.使用Mint UI的infinite-scroll实现上拉分页加载
接上篇<21.Vue-UI框架之Mint UI的使用> 上一篇我们讲解了Vue的UI框架Mint UI的使用,本篇我们来通过Mint UI提供的infinite-scroll组件结合api ...
[小黄书小程序]主页面笔记图片高度自适应及上拉无限加载及下拉更新
上一章我们实现了小黄书小程序标签栏的左右滑动和弹出框UI功能,今天我们会开始实现主页面中笔记的呈现. 主要的功能会囊括以下几个方面: 笔记的两列式布局: 一行只是显示两个笔记.且每个笔记的封面图片的高 ...
html 下拉滚动加载,原生js滚动到底部加载数据和下拉刷新 Scrollload
初衷如今移动端站点越来越多,滚动到底部加载数据和下拉刷新的需求非常的常见,即使现在很多pc站点也会有这样的需求,比如百度首页就有.虽然简单的完成这么一个功能非常方便,但是滚动往往会成为性能的瓶颈,处 ...
百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等...
写了一天,以下是我自己摸索出来的,暂时只做了两层地图,废话不多说,上图上代码图片: 第一层地图点击圆形覆盖物或者放大地图进入第二层地图,缩放会回到第一层拖拽地图或者缩放地图会触发可视化数据下拉 ...
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
<script> export default {data() {return {pageIndex: 0,//页码pageSize: 10,//每次加载条数lock: false,//防 ...
react react-pdf实现在线pdf加载（翻页加载、下拉滚动加载）
目录导入react-pdf 在文件中引入并使用下拉展示导入react-pdf npm i react-pdf -S 或 yarn add react-pdf 在文件中引入并使用从react-p ...
Android ListView下拉与上拉刷新加载更多数据二
效果图: java代码中: public class MainActivity extends Activity implements OnRefreshListene ...

【react native】Flatlist实现上拉滚动加载

【react native】Flatlist实现上拉滚动加载相关推荐

最新文章

热门文章