问题标签 [scrolltoindex]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
435 浏览

react-native - scrollToIndex 在 RTL FlatList React-Native 中不起作用

我有 Horizo​​ntal FlatList,现在我将电话语言更改为阿拉伯语 (RTL)。scrollToIndex() 在 RTL 中不起作用,没有 RTL,它可以按预期正常工作。有什么建议么?

平面列表

Press() 上的 renderItem 函数正在传递项目 ID

提前致谢。

0 投票
2 回答
1253 浏览

react-native - FlatList scrollToIndex 方法不会滚动到正确的索引

实际行为:

我正在开发一个在 react-native 中播放应用程序并在其中实现轨道播放器的播客。当我在播放器屏幕中播放播客时,点击下一个图标两次,然后导航到当前播放器屏幕中正在播放的播客的主题屏幕,然后我需要从 FlatList 滚动到正在播放的播客项目主题屏幕并将其显示为突出显示。

为此,我将FlatList 的scrollToIndex方法与 FlatList 的getItemLayout属性结合使用,并将当前正在播放的播客项目的索引传递给该方法。但是该方法没有按预期工作,并且滚动到错误的位置。我也尝试了许多没有用的解决方法。

预期行为:

我应该从播放器屏幕的主题屏幕滚动到正在播放的特定播客项目,并将其显示为突出显示。有人能帮助我吗。提前致谢。

我尝试过的:

环境 :

“反应”:“16.8.3”,“反应原生”:“0.59.9”,“MacOS”:“10.15.3”

0 投票
0 回答
20 浏览

swift - Swift 如何显示最新的 Firebase 消息而不会出现故障滚动到最后一个索引

我试图弄清楚当您单击聊天时如何仅显示像 instagram 和 Facebook 这样的最后一条消息(在我的情况下,只有 2 个用户之间的一个)。

在我观察到所有消息之后,我会执行我认为是标准的这个

不幸的是,这将以一种非常错误的方式显示消息滚动,并且每次我打开聊天时都会这样做。我一直无法找到在线显示最新消息的方法。每个人似乎都在使用 scrollToItem (动画并不重要,因为它看起来很不稳定)。每次点击聊天时如何只显示最新消息?

0 投票
1 回答
387 浏览

react-native - ReactNative ScrollToIndex 太慢了

我使用 react native 为法律文件创建应用程序。我需要文档可滚动。我使用 VirtualizedList 渲染它。事情是当我尝试使用 scrollToIndex(index: 'something') 时,性能太慢了。我的列表包含大约 4000 个渲染项目(每个项目大约有一段长)。

有什么办法可以让这个运行更顺畅吗?

0 投票
2 回答
1182 浏览

reactjs - React-Native:使用 FlatList ref 的 scrollToIndex 时出错

我正在尝试滚动到 flatlist 上的特定索引。我正在使用它的水平属性。我正在尝试使用 ref 滚动到特定索引。但我得到了错误。

scrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed, otherwise there is no way to know the location of offscreen indices or handle failures.

这是我的 Flatlist 代码:

这是在特定索引上滚动的代码:

0 投票
1 回答
89 浏览

react-native - react-naitve,如何移动到平面列表中的某个项目

我正在使用 react-native 制作自己的应用程序,我在做通知功能时遇到了一些困难。

我们有板子和评论,如果我们注意到有人写了评论,我想去平面列表评论中的评论(板子里可能有很多评论,所以如果我们只是去董事会而不关注通知评论,用户可能很难查找评论)。我在 flatlist 中搜索了一些滚动索引方法的示例。但我想直接去没有按钮或输入。我们在通知模型中有评论 ID。所以首先我认为,如果我们比较 flatlist 中的评论 ID 和设置状态,我们可以保存该评论的索引。但是 setState() 在 flatlist 中不起作用,因为错误“无法从不同组件的函数体内更新组件”。其次,我不知道我们将函数 scrollToIndex() 放在哪里,因为它可能会在渲染完成后移动。但我不知道那个状态。

如果您知道如何解决该问题,请帮助我!

(你可以认为instagram评论通知,如果我们点击它们,我们可以看到该评论,无论它们在哪里,因为它会自动移动到该评论

0 投票
0 回答
487 浏览

reactjs - 从最后一项到第一项的 scrollToIndex Flatlist 导致空白屏幕

在 React Native 中,我试图在“scrollToIndex”的帮助下滚动一个平面列表。这工作正常,直到我想从最后一页转到第一页(索引 0)。然后不调用“renderItem”,我看到一个空页面,而不是平面列表预期的渲染页面/项目。

我采取的步骤:

首先我在组件中创建了一个钩子引用: const flatListRef = React.createRef();

然后我将 flatlist 添加到组件渲染中:

然后我添加了一个 useEffect,它将平面列表从索引 8 滚动到 0:

最后我为平面列表添加了数据:

预期行为: 它加载最后一页,5 秒后它应该打开第一个项目/页面(索引 0)并成功呈现。

实际行为: 它加载最后一页,5 秒后打开第一页,但平面列表不调用“renderItem”,因此显示一个空页面。

小吃示例

0 投票
1 回答
401 浏览

javascript - ReactNative FlatList scrollToIndex 问题

我的 App.js 中有以下代码:

  1. 主要的refFlatList 设置在一个useEffect钩子中flatListRef
  1. renderItem所需组件呈现为 FlatList 的一项的函数
  1. 实际的 FlatList 定义

我的任何Welcome, Hospital, Snippets,Disease组件中都有以下代码。例如:

我有一个主要的 FlatList,它在开始时有 2 个组件,Welcome索引为 0 的Hospital组件和索引为 1 的组件。在Hospital组件中,我有按钮,当它们被按下时,将另一个项目(Hospital、、、Disease)添加Snippets到 FlatList。项目添加成功,我可以手动滑动到它们。

当我尝试自动滚动到最后添加的项目时出现问题。我想要以下行为:按下按钮后,将一个新项目添加到 FlatList 并自动滚动到它。我还想在当前 FlatList 中的任何索引处滚动。

我得到的错误是: scrollToIndex out of range: requested index 2 but maximum is 1

为什么它说maximum is 1当我用眼睛看到 FlatList 中至少有 3 个项目时。

已经在这2天了,没有发现任何有用的东西。此外,我还没有找到与使用 scrollToIndex 一起从 FlatLists 添加或删除项目的示例。尝试使用 VirtualizedLists,与 FlatList 相同的问题。我怀疑这是个ref问题。我不明白为什么 FlatList 不更新它呈现的数据的长度,所以我可以滚动到它。

任何建议表示赞赏。

0 投票
1 回答
9800 浏览

react-native - 第一次加载屏幕时,React Native FlatList scrollToIndex()不起作用

我的反应原生应用程序中有这个类别过滤器组件。第一次加载此组件时,它不会滚动到给定的索引项(即 3)。我检查了一下,函数scrollToIndex正在调用。但是在加载屏幕后重新渲染组件时它正在工作。

为什么在第一次加载屏幕时它不向下滚动?

0 投票
1 回答
197 浏览

react-native - 如何滚动到 FlatList 中单击列表项的索引

我有一个 react native FlatList,当单击该列表中的一个项目时,我希望页面滚动到该列表项的顶部(因此该项目的顶部现在位于页面/屏幕的顶部)。我一直在使用 scrollToIndex。我在 renderItem 中添加了一个 onPress,它调用了一个函数“onClickItem”。我已将 scrollToIndex 放入该函数中,并传入被单击项目的索引。这虽然行不​​通。请问我哪里错了?