react native scrollview 滚动停止事件

最新推荐文章于 2025-06-13 11:18:13 发布
最新推荐文章于 2025-06-13 11:18:13 发布
阅读量6.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： react-native 文章标签： React-Native ScrollView scrollEnd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lpcz2010/article/details/53606638
本文解析了ScrollView在用户交互过程中的两种回调方法：onMomentumScrollEnd和onScrollEndDrag的区别及触发条件。onScrollEndDrag在手指离开界面时必定触发；而onMomentumScrollEnd则在手指拖动产生动画滚动效果后才触发。

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

1. 手指拖动之后，scrollview 滚动动画结束 回调 ：onMomentumScrollEnd

2.手指拖动之手指离开界面回调：onScrollEndDrag


所以：onScrollEndDrag 一定会被调用，onMomentumScrollEnd 如果手指拖动很慢，没有动画滚动就不会调用

ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview
2401_84447417的博客
04-29 1182
ScrollView在Android和ios原生开发中都比较常见，是一个滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1。
react native 实现列表滑动 菜单栏悬停 （过程优化，体验更平滑）
娃娃鼠小抄
12-13 8127
菜单栏是个 Animated.View , 他的高度会随着列表的onScroll时间滑动重置 （这个很共识） 但是 你要把 view 的高度 放到state中，跟着onScroll 改变，这样的滑动效果会有卡顿感。 这里onScroll里的方法要这样写：  Animated.event(       [{ nativeEvent: { contentOffset: { y: this.st
【React Native 性能优化：虚拟列表嵌套 ScrollView 问题全解析】
最新发布
qq_45973421的博客
06-13 1271
React Native 虚拟列表嵌套 ScrollView 会导致性能问题，触发警告"VirtualizedLists should never be nested inside plain ScrollViews"。主要原因在于两者滚动机制冲突：ScrollView 全量渲染，而虚拟列表仅渲染可视区域。解决方案包括：1) 使用单一虚拟列表替代嵌套结构；2) 禁用内层滚动；3) 采用不同滚动方向。优化建议：合理配置 windowSize、maxToRenderPerBatch 等参数，预计算项目高度(ge
react native ScrollView滚动不起作用
xiaoxnn的博客
11-29 4240
在做页面初始化时， 想ScrollView跳转到指定的位置，结果发现代码执行了，却没有跳到指定的位置
js 判断滚动条是否停止滚动
默默地博客
02-08 1311
// 滚动的值 var start = 0; // 对比时间的值 var end = 0; var timer = null; document.onscroll = function(){ clearTimeout(timer) // 每次滚动前 清除一次 timer = setTimeout(Data, 2000); star...
前端：Taro ScrollView事件无法生效
2301_80820432的博客
01-18 1311
无法检测到scrollView事件，handleScroll方法获取不到监听的滚动的e事件。网上看了很多，很多都是高度的问题。也都试过了父元素设置高度，ScrollView都设置到了10000px，虽然页面可以滑动但是监测不到滑动事件。style的height用了100%也没用，最后尝试使用了style={{height:'100vh'}}成功，可以监听到滑动事件了。
ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview(1)
2401_84447233的博客
05-16 374
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview(3)
2401_84447262的博客
05-16 654
资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。ScrollView在Android和ios原生开发中都比较常见，是一个滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。所以，要给一个ScrollView。
react-native-scroll-direction：一个ScrollView和FlatList，尝试公开用户滚动的方向
02-14
在React Native开发中，`react-native-scroll-direction`是一个非常实用的库，它为ScrollView和FlatList组件添加了一个功能，即能够检测并公开用户的滚动方向。这个特性对于创建响应式和交互式的用户界面至关重要，...
react-native scrollview触摸滚动事件
weixin_30780221的博客
08-30 709
目录 1、几个已知的滑动或者滑动开始结束的方法： 2、还有其他的一些事件如下 3、下面就这些方法的顺序做个简单的介绍： 4、android上的时间分为两种，一个是滑动一次，一个是连续滑动两次甚至多次，详见下图： 4.1、滑动一次 4.2、滑动两次或者多次： ...
React-Native中一些组件的用法(二)
黎默的博客
04-22 450
本文为大家介绍一下React-Native中一些深入些的组件，由于对ES6的语法并没有完全掌握，这里暂时用ES5和ES6混用的语法。
浅谈react native中的ScrollView
小小发的博客
05-08 8234
1、ScrollView介绍（官方解释）：ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动（默认），还能水平滚动（通过horizontal属性来设置）。2、ScrollView常用属性： horizontal（布尔值）：当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方
react native scrollview深入详解触摸滚动事件
热门推荐
liu__520的博客
12-15 1万+
大家都知道scrollview的几个属性和方法：详细的方法请参考： 江清清专栏：React Native控件之ScrollView组件讲解(14) 这里我就讲解下scrollview的触摸和滑动顺序，并讲解下scrollview的几个触摸方法 1、几个已知的滑动或者滑动开始结束的方法： onScroll：在滚动过程中, 每帧最多调用一次此函数, 调用的频率可以用scro
react-native – React本机嵌套ScrollView锁定
hahahhahahahha123456的博客
12-02 848
我试图在React Native中嵌套ScrollViews;具有嵌套垂直卷轴的水平滚动。 以下是一个例子： var Test = React.createClass({ render: function() { return ( <ScrollView style={{width:320, h...
react-native---rn中的滑动视图组件（ScrollView）
Wbiokr的博客
01-22 1万+
ScrollView组件介绍与简单使用 React Native中的 ScrollView 的组件除了包装滚动平台，还集成了触摸锁定的 响应者 系统，使用的时候有几点需要注意 //ScrollView 必须有一个确定的高度才能正常工作,对于 ScrollView 来说，它就是将一些不确定高度的子组件装进确定高度的容器 //初始化的2中方式 1. 给 ScrollView 中加 [
React Native列表视图FlatList使用优化实践指南
weixin_34026276的博客
04-02 1708
列表视图在app中是非常常见的，目前React Native比较严重的性能问题集中在FlatList大列表等地方，以下通过js层的优化，甚至原生层的优化封装，使性能媲美原生。 FlatList React Native 0.43版本推出FlatList替代ListView，FlatList实现继承自VirtualizedList，底层的VirtualizedList提供更高的灵活性，但使用便捷性不...
ScrollView组件
小毅哥哥的博客
06-19 1274
ScrollView 一 基本功能 在 indeiosjs 中 新建另一个js 文件myScrollViewjs 二电影模块 添加一个本地 JSON 数据文件 datajson 创建一个movieListjs文件 在 indexiosjs文件中修改 配置ScrollView一 .基本功能1.在 inde.ios.js 中//ScrollView组件import React, {Component}
react native中ScrollView横向滚动
03-19
### React Native 中实现 ScrollView 横向滚动的方式 在 React Native 中，`ScrollView` 组件可以通过设置 `horizontal={true}` 属性来启用横向滚动功能[^3]。以下是具体的实现方法以及代码示例： #### 设置属性 为了使 `ScrollView` 支持横向滚动，需将 `horizontal` 属性设为 `true`。如果希望页面能够按固定宽度分页显示，则可以额外配置 `pagingEnabled={true}` 属性。 #### 示例代码 以下是一个完整的代码片段，展示如何创建一个支持横向滚动并带有分页效果的 `ScrollView`： ```javascript import React from 'react'; import { StyleSheet, ScrollView, View, Text } from 'react-native'; const HorizontalScrollExample = () => { const renderItem = (text, color) => ( <View style={[styles.itemContainer, { backgroundColor: color }]}> <Text>{text}</Text> </View> ); return ( <ScrollView style={styles.scrollView} horizontal={true} // 启用横向滚动 pagingEnabled={true} // 添加分页效果 showsHorizontalScrollIndicator={false}> {/* 隐藏水平滚动条 */} {renderItem('Page 1', '#FFC0CB')} {renderItem('Page 2', '#90EE90')} {renderItem('Page 3', '#ADD8E6')} </ScrollView> ); }; const styles = StyleSheet.create({ scrollView: { height: 200, }, itemContainer: { width: '100%', justifyContent: 'center', alignItems: 'center', paddingVertical: 50, }, }); export default HorizontalScrollExample; ``` 上述代码定义了一个简单的 `ScrollView`，其中每一项占据整个屏幕宽度，并通过颜色区分不同的页面内容。同时隐藏了水平滚动条以提升用户体验。 #### 关于性能优化 当数据量较大时，建议考虑使用更高效的列表组件如 `FlatList` 或者原生平台的列表控件（例如 iOS 的 UITableView 和 Android 的 RecyclerView），因为这些组件具有更好的内存管理和渲染效率[^4]。 ---
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值