关于ScrollView中嵌套FlatList的一点经验

最新推荐文章于 2022-08-25 16:04:22 发布

Aichiwawacai

最新推荐文章于 2022-08-25 16:04:22 发布

阅读量4.8k

点赞数 1

文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/Aichiwawacai/article/details/103890351

版权

本文分享了在ReactJS项目中，如何处理ScrollView内嵌套FlatList的滚动和上拉加载问题。关键点包括设置FlatList的maxHeight以确保正常滚动和下拉加载，同时注意控制加载频率以避免过度加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天需要做一个包含滚动，上拉加载的界面，由于滚动区域包含一部分非上拉加载的模块，如下图所示
（请忽略我一会上拉一会下拉，统一视为上拉，懒得改图了。。。）
在这里插入图片描述
通过尝试多次，发现，ScrollView如果和FlatList嵌套的话需要注意：

两者嵌套后的关系

   <View onStartShouldSetResponderCapture={() => {
                this.setState({ enableScrollViewScroll: true });
            }}>
            <ScrollView scrollEnabled={this.state.enableScrollViewScroll}>
            滚动区域

            <View style={
  {backgroundColor:'#eeeeee'}}>            
               ...这一部分是不上拉加载但需滚动区域 ，即下图绿色区域        
            <View style={
  {margin:8}}>
                { this.state.topics.length?this.renderFlatList():null}//这里请求到数据后通过函数自动生成需要上拉加载的部分模块，即下图黄色区域


        </View>

            </View>
           <