rn的scrollView的滚动距离

最新推荐文章于 2023-03-03 21:17:07 发布
最新推荐文章于 2023-03-03 21:17:07 发布
阅读量1k 收藏
点赞数
分类专栏： react-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Angely_cc/article/details/105408889
版权 
let scrollViewRef =''
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        ref={ref => { scrollViewRef = ref }}
      // onScroll={(e) => {
      //   // 监听滚动 的距离
      //   // console.log(e.nativeEvent)
      //   contentOffset = e.nativeEvent.contentOffset.x
      //   if (e.nativeEvent.contentOffset.x === 0) {
      //     nu = 0
      //     contentOffset = 0
      //   }
      //   // 到尾部了

      //   if (e.nativeEvent.contentOffset.x + e.nativeEvent.layoutMeasurement.width >= e.nativeEvent.contentSize.width) {
      //     contentOffset = 0
      //   }
      // }}
      >
眼睛微微笑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
RN ScrollView 实现轮播图效果
08-09
使用RN 的Scrollview 实现轮播图效果
判断scrollView滚动结束
04-21
重写scrollView的onTouchEvent事件，在MotionEvent.ACTION_CANCEL和MotionEvent.ACTION_UP中通过反射获取scrollview中的OverScroller，然后获取OverScroller的状态判断scrollview是否结束滚动
react-native scrollView nativeEvent滑动距离等参数
qq_39558062的博客
06-23 1587
{ nativeEvent: { contentInset: {bottom, left, right, top}, contentOffset: {x, y}, //滑动距离 contentSize: {height, width}, //列表的宽高 layoutMeasurement: {height, width}, //显示出来的宽高 zoomScale } }
react native的ScrollView滑动到指定位置
peach
01-28 1万+
情景：Modal做的选择弹出框，传入用户可选择的数据源，用户选择之一，下次点开时，自动到当前选择的参数位置附近，方便用户调整                 ref={scrollView => {                 if(scrollView !== null){                     setTimeout(()=>{     //父组件传入的
RN FlatList使用详解及源码解析
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
10-26 1万+
FlatList使用详解及源码解析 前言 长列表或者无限下拉列表是最常见的应用场景之一。RN 提供的 ListView 组件，在长列表这种数据量大的场景下，性能堪忧。而在最新的 0.43 版本中，提供了 FlatList 组件，或许就是你需要的高性能长列表解决方案。它足以应对大多数的长列表场景。 一、功能简介 FlatList高性能的简单列表组件，支持下面这些常用的功能： 完全跨平台。 支持水平...
react-native---rn中的滑动视图组件（ScrollView）
热门推荐
Wbiokr的博客
01-22 1万+
ScrollView组件介绍与简单使用 React Native中的 ScrollView 的组件除了包装滚动平台，还集成了触摸锁定的 响应者 系统，使用的时候有几点需要注意 //ScrollView 必须有一个确定的高度才能正常工作,对于 ScrollView 来说，它就是将一些不确定高度的子组件装进确定高度的容器 //初始化的2中方式 1. 给 ScrollView 中加 [
ReactNative（3）{多列布局、实现滚动效果、ReactNative路由}
weixin_59684494的博客
01-17 1062
多列布局 // rnc react native component import React, {Component} from 'react'; // 组件或者API使用时,需要提前导入 import {Text, View, FlatList, Dimensions, Image} from 'react-native'; // 获取屏幕的宽高 const {height, width} = Dimensions.get('window'); // rpx换算为物理像素 使用方法 例如:30r
Scrollview的滑动距离
newcichang的专栏
11-29 1994
想要这样一个效果，帧布局的一透明的搜索框随着Scrollview的距离改变而改变，本来用scrollview的触摸监听来做，结果发现，scrollview的滚动距离并不是手势最终的滚动距离，搜索框总是位置不对，因为scrollview的getScrollY()返回不正确的值             在网上找到了解决方案，重写scrollview的onScrollChanged（）方法获取scro
android ScrollView滚动距离和判断滚动停止状态
pangzaifei的专栏
01-16 5619
今天很高兴，自己解决了判断ScrollView滚动停止的监听,现在分享给大家。 因为ScrollView没有像listView中的setOnScrollListener()监听，当然也就没有SCROLL_STATE_IDLE等。 解决的问题： 公司项目需要在一个列表中，类似listView,因为业务要求，这个列表是用拼凑的方法，拼凑出来的，所以外层包裹一层ScrollView。 现在公司要
iOS自定义可展示、交互的scrollView滚动条
08-26
主要为大家详细介绍了iOS自定义可展示、交互的scrollView滚动条，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ScrollView滚动条颜色的设置方法
09-05
ScrollView滚动条颜色的设置方法，需要的朋友可以参考一下
Unity ScrollView滚动列表最底展示
最新发布
10-26
Unity里面ScrollView会不停创建新资源，比如聊天界面需要在最底下展示，那么这时候需要用到小工具
SCrollView自动滚动视图
10-10
学习SCrollView整的小东西,实现循环翻页效果。利用停表加了自动滚动的效果。
UGUI实现ScrollView无限滚动效果
08-26
主要为大家详细介绍了UGUI实现ScrollView无限滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
react实现Dom元素滚动到底部分页加载数据，渲染列表
mutuyxy的博客
03-03 814
react实现Dom元素滚动到底部分页加载数据，渲染列表
React Native中监听ScrollView滑到底部事件监听
大灰狼的小绵羊哥哥的博客
08-02 1万+
需求：RN 页面中，需要对scrollView滑到底部，上传事件。 首先找到ScrollView 中滑动结束后触发的函数 可以找到onMomentumScrollEnd ScrollView style={{flex:1}} onRefresh = {this._onRefreshData} onMom
ReactNative Scrollview 计算高度
T3119205的专栏
08-23 757
var offsetY = event.nativeEvent.contentOffset.y; //滑动距离 var contentSizeHeight = event.nativeEvent.contentSize.height; //scrollView contentSize高度 var oriageScrollHeight = event.nativeEvent.layoutMeasurement.height; //scrollView高度 if (offsetY + oriageScro
LAYUI 折叠面板
ShiGtai的博客
10-27 1522
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作 layui.use(‘element’, function () { var element = layui.element; //折叠面板监听 element.on(‘collapse(filter)’, function(data){ // console.log(data.show); //得到当前面板的展开状态，true或者false // console.log(data.title); //得到当前点击面板的标题区域DOM对
RN的scrollView如何滚动到整行
08-30
要使 React Native 中的 ScrollView 滚动到整行，您可以使用 scrollTo 方法来滚动到特定的位置。请按照以下步骤操作： 1. 首先，获取要滚动到的行的相对位置。您可以使用 `onLayout` 属性来获取行的布局信息。例如，给每一行添加一个 `onLayout` 属性： ```jsx <View onLayout={event => { /* 处理布局信息 */ }}> {/* 行的内容 */} </View> ``` 2. 在获取到布局信息后，计算出要滚动到的目标位置。这可能涉及一些数学计算，具体取决于您的布局结构和行的大小。 3. 在适当的时机，调用 ScrollView 的 `scrollTo` 方法来滚动到目标位置。请确保在 ScrollView 已经完全加载后调用该方法。例如，可以在 ScrollView 的 `onContentSizeChange` 属性中调用 `scrollTo` 方法： ```jsx <ScrollView onContentSizeChange={(contentWidth, contentHeight) => { // 调用 scrollTo 方法来滚动到目标位置 scrollViewRef.current.scrollTo({ y: targetY, animated: true }); }} ref={scrollViewRef} > {/* 所有行的内容 */} </ScrollView> ``` 这里的 `targetY` 是通过计算得到的目标位置的垂直坐标。 记得将 `scrollViewRef` 创建为一个 ref 对象，并将其赋值给 ScrollView 组件。 这样，当 ScrollView 的内容大小发生变化时，它会滚动到指定的目标位置。 希望这个解答对您有帮助！如有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值