React Native 上拉加载

最新推荐文章于 2024-07-16 17:18:13 发布

原创最新推荐文章于 2024-07-16 17:18:13 发布 · 975 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react Native #上拉加载

前端开发专栏收录该内容

121 篇文章

订阅专栏

本文详细介绍了无限滚动加载技术的实现原理与过程。通过在ScrollView底部预设loading图表，在滚动至底部时触发数据请求，自动加载新内容。文章深入探讨了如何判断下一页数据状态，实现数据无缝加载与‘没有更多数据’的优雅提示。

实现的比较简单，原理就是在下一页有数据的情况下，ScrollView底部始终会有一个loading图表和加载中的文字，每次ScrollView滚动到底部时loading部分就会显示出来，然后去请求数据，数据请求回来追加到到列表中，这样loading就又被挤到下面去了。怎么判断下一页是否有数据呢，就是比较请求后台的长度跟拿回来数据的列表的长度。

比如，如果每次请求20条数据，但是结果只返回了5条，那就是下一页没有数据了，这个时候就隐藏loading部分，显示出‘没有更多数据’的提示

ScrollView底部放一个loading —> 滚动到底部调用加载数据请求 —> 判断下一页是否有数据 —>有数据则追加数据，没有则显示没有数据提示

	<ScrollView
        bounces={false}
        removeClippedSubviews={true}
        style={{flex: 1}}
        onScroll={(evt)=>this.scrollHandle(evt)}
      >
        <View  style={{}}>
          {ListView}//显示列表视图
        </View>
        {!this.state.noMoreData&&this.state.list.length != 0&& <View style={styles.loadingCon}> //加载中。。。
            <ActivityIndicator size="small" color="#ED4F4F" />
            <Text style={styles.loadingText}>加载中...</Text>
        </View>}
        {this.state.noMoreData&&this.state.list.length != 0&&<View>//没有更多数据显示
            <Text style={styles.noMoreDataText}>没有更多数据</Text>
        </View>}
      </ScrollView>

滚动监听方法

scrollHandle(e){
    let y = e.nativeEvent.contentOffset.y;
    let height = e.nativeEvent.layoutMeasurement.height;
    let contentHeight = e.nativeEvent.contentSize.height;
    if (y + height >= (contentHeight-0.5)&&this.state.tipslist.length!=0) {//已经滚动到底部
        this.queryData()
    }
  }

上拉加载数据和数据加载情况判断

queryData（）{
/*	请求数据 */
if (list.length > 0) {//有返回数据就追加到列表中
	 this.setState({
	        list: [...this.state.list, ...list],
	    });
	} else {
	    this.setState({//否则显示‘没有更多数据’
	        noMoreData:true
	    })
	}
	if(list.length < this.state.pagesize){//下一页没有数据则显示‘没有更多数据’
	    this.setState({
	        noMoreData:true
	    })
	}
}