react native scrollview 滚动停止事件

最新推荐文章于 2024-05-16 01:24:52 发布
原创 最新推荐文章于 2024-05-16 01:24:52 发布 · 6.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#React-Native #ScrollView #scrollEnd

本文解析了ScrollView在用户交互过程中的两种回调方法：onMomentumScrollEnd和onScrollEndDrag的区别及触发条件。onScrollEndDrag在手指离开界面时必定触发；而onMomentumScrollEnd则在手指拖动产生动画滚动效果后才触发。

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

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


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

ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview
2401_84447417的博客
04-29 1304
ScrollView在Android和ios原生开发中都比较常见，是一个滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1。
react native 实现列表滑动 菜单栏悬停 （过程优化，体验更平滑）
娃娃鼠小抄
12-13 8155
菜单栏是个 Animated.View , 他的高度会随着列表的onScroll时间滑动重置 （这个很共识） 但是 你要把 view 的高度 放到state中，跟着onScroll 改变，这样的滑动效果会有卡顿感。 这里onScroll里的方法要这样写：  Animated.event(       [{ nativeEvent: { contentOffset: { y: this.st
React-Native中一些组件的用法(二)
黎默的博客
04-22 472
本文为大家介绍一下React-Native中一些深入些的组件，由于对ES6的语法并没有完全掌握，这里暂时用ES5和ES6混用的语法。
浅谈react native中的ScrollView
小小发的博客
05-08 8263
1、ScrollView介绍（官方解释）：ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动（默认），还能水平滚动（通过horizontal属性来设置）。2、ScrollView常用属性： horizontal（布尔值）：当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方
react native ScrollView滚动不起作用
xiaoxnn的博客
11-29 4296
在做页面初始化时， 想ScrollView跳转到指定的位置，结果发现代码执行了，却没有跳到指定的位置
js 判断滚动条是否停止滚动
默默地博客
02-08 1331
// 滚动的值 var start = 0; // 对比时间的值 var end = 0; var timer = null; document.onscroll = function(){ clearTimeout(timer) // 每次滚动前 清除一次 timer = setTimeout(Data, 2000); star...
ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview(1)
2401_84447233的博客
05-16 429
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview(3)
2401_84447262的博客
05-16 711
资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。ScrollView在Android和ios原生开发中都比较常见，是一个滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。所以，要给一个ScrollView。
react-native-scroll-direction：一个ScrollView和FlatList，尝试公开用户滚动的方向
02-14
在React Native开发中，`react-native-scroll-direction`是一个非常实用的库，它为ScrollView和FlatList组件添加了一个功能，即能够检测并公开用户的滚动方向。这个特性对于创建响应式和交互式的用户界面至关重要，...
前端：Taro ScrollView事件无法生效
2301_80820432的博客
01-18 1461
无法检测到scrollView事件，handleScroll方法获取不到监听的滚动的e事件。网上看了很多，很多都是高度的问题。也都试过了父元素设置高度，ScrollView都设置到了10000px，虽然页面可以滑动但是监测不到滑动事件。style的height用了100%也没用，最后尝试使用了style={{height:'100vh'}}成功，可以监听到滑动事件了。
react-native scrollview触摸滚动事件
weixin_30780221的博客
08-30 751
目录 1、几个已知的滑动或者滑动开始结束的方法： 2、还有其他的一些事件如下 3、下面就这些方法的顺序做个简单的介绍： 4、android上的时间分为两种，一个是滑动一次，一个是连续滑动两次甚至多次，详见下图： 4.1、滑动一次 4.2、滑动两次或者多次： ...
react-native实现轮播图
weixin_50813407的博客
03-30 1191
因为UI已经成功被渲染出来， 所以放在这个函数里进行请求操作，不会出现UI上的错误。注意图片地址目录：F:\wamp\www\07react JS\01\Hello\android\app\src\main\res\drawable，其中drawable是我自己创建的，里面的图片不能用数组开头，不能随意修改图片的后缀名(也就是不要把jpg格式改为png格式)，否则编译的时候android报错。scrollView无疑是移动开发中很重要的一个组件，比如后面会学到的ListView就是继承自它。
react native scrollview深入详解触摸滚动事件
热门推荐
liu__520的博客
12-15 1万+
大家都知道scrollview的几个属性和方法：详细的方法请参考： 江清清专栏：React Native控件之ScrollView组件讲解(14) 这里我就讲解下scrollview的触摸和滑动顺序，并讲解下scrollview的几个触摸方法 1、几个已知的滑动或者滑动开始结束的方法： onScroll：在滚动过程中, 每帧最多调用一次此函数, 调用的频率可以用scro
react-native系列(6)组件篇： ScrollView滚屏及滚屏加载
@黄小泽的个人博客
02-27 5745
ScrollView是RN中的一个滚动视图组件，它必须有一个确定的高度才能正常工作，因为在应用时往往会把将一系列不确定高度的子组件装进一个确定高度的容器。关于滚动视图高度这一点，不建议直接在样式中设置一个固定的height值(在目前最新版本中直接无效)，而是通过设置flex: 1以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了高度，否则就会导致无法正常滚动。 ...
react-native 给ScrollView添加上拉加载和下拉刷新
在下月亮有何贵干
12-07 2566
目录上拉加载下拉刷新 上拉加载 添加onScrollEndDrag事件 <ScrollView onScrollEndDrag={this.onMomentumScrollEnd} > ... </ScrollView> onScrollEndDrag事件方法 属性值计算，offSetY + oriageScrollHeight >= contentSizeHeight - 1可判断下拉到底部 我加了pageLoadingFull属性判断是
react-native – React本机嵌套ScrollView锁定
hahahhahahahha123456的博客
12-02 891
我试图在React Native中嵌套ScrollViews;具有嵌套垂直卷轴的水平滚动。 以下是一个例子： var Test = React.createClass({ render: function() { return ( <ScrollView style={{width:320, h...
基于React的垂直选项卡（含锚点定位功能）
weixin_38974419的博客
12-09 1957
需求：类似于美团的商家页面，左边是可点击选择的商品品类，右边是按各商品品类分类的商品列表。点击左边某品类时，右边商品列表自动滚动定位到该品类下商品第一个；滚动右边商品列表时，当滚动到某个品类名时自动定位高亮相对应的左边的品类名列表。 所用到的插件：基于滚动插件better-scroll完成。用之前需要先了解一下better-scroll文档。 所遇到的问题：在实际运用中，但商品品类和商品列表数据量特别大的时候，尤其是商品列表项目中有图片加载和事件绑定时，右侧的商品列表滚动会非常的卡顿。 解决问题思路：
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、付费专栏及课程。

余额充值