问题标签 [react-swipeable-views]

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 回答
468 浏览

react-native - 当孩子用 Swipeable 包裹时,FlatList 或 ScrollView 不起作用

我有一个 FlatList,FlatList 中的每个项目都用 react-native-gesture-handler/Swipeable 中的 Swipeable 包装。似乎 Swipeable 取消了手势,并且如果我的手指在 Swipeable 元素上,则不允许 FlatList 滚动。有什么办法吗?到目前为止,我还无法让它们一起正常工作。

编辑

感谢您的回答,原来问题在于整个视图被包装在 DismissableKeyboard 组件中。我删除了它,现在一切正常。

0 投票
1 回答
985 浏览

css - 如何在具有不同内容长度和不同高度的自定义组件中滑动

我对具有不同长度/高度的滑动组件感到绝望..所以我需要的是“自动高度” ——但这并没有什么不同!

我真正想要的是我的应用程序应该包含的 4 或 5 个页面,并且我想通过滑动/滑动来切换页面。我将所有组件都放在了 App.js 的 return() 中,如下所示...

不使用路由器,因为我基本上需要 2 个 url 在 -> 登录和 App.js 中的页面之间切换。但如果有其他选择,请告诉我:)

所以这些组件是我的页面,我想滑动/滑动所有页面。但是这些中的每一个都有不同的长度/高度:

  • 一个有一个应用栏作为页脚。页眉和页脚之间有可以垂直滚动的内容;
  • 另一个组件只是一长串必须垂直滚动的内容......等等。

使用上面使用 react-swipeable-views 的代码,组件的行为如下:

我垂直向下滚动1次,然后直接降落在内容的末尾。完美。但我可以继续滚动到空白区域(假设:高度:100vh,因此内部所有组件的完整“滑动器/滑块”与最长/最高组件一样长/一样高?)。

对于带有页眉和页脚的组件(可滚动内容仅在页眉和页脚之间),第一个滚动将我带到中间列表的末尾,而我的页脚很好地保持在底部。完美的!再次滚动会导致页脚后出现空白(即使底部:0 和位置:固定或静态或其他......)。

当我将高度设置为自动containerStyle = {{width: '100vw', height: 'auto', ..}}

(而不是"height: 100vh")我不能再滚动了,一点也不能!..如果我设置,同样的事情会发生height: '100%'。在这两种情况下,甚至页脚都会在那个组件中消失!!!

以下是 html、body 和 root 的 css 参数:

请帮我!我应该使用不同的库而不是 react-swipeable-views 吗?如果是,是哪个?或者有没有办法解决这个问题?

版本:

PS:如果我在css中将html或body或root的高度设置为100vh,我会在垂直滚动时获得额外的空间,这当然是我想避免的(假设:与Chrome中的url栏有关?)。

0 投票
2 回答
1055 浏览

reactjs - 使用 react 路由器和 react-swipeable -views 在标签更改时更改 url

我有一个反应组件,它使用material-ui tabsand react-swipeable-views。我遇到的问题是,切换选项卡时,显示的 url 没有改变,我注意到这是 react-swipeable-views 逻辑。我也想申请react-router以更改选项卡上的 url,同时保留 react-swipeable-view 逻辑。

以下是我的代码的一部分,其中包含一些其他详细信息:

默认的 url 显示如下所示,更改视图时它不会更改:localhost:3000/clusters/<task:id> 但是我有三个选项卡 ( runs, tasks, settings),它们控制 react-swipeable-views。我希望 url在选项卡更改时分别显示为 ( localhost:3000/clusters/<task:id>/runs, localhost:3000/clusters/<task:id>/tasks, ) 。localhost:3000/clusters/<task:id>/settings

我怎样才能做到这一点并保留反应可滑动的逻辑?

谢谢

以防万一,该 url 是从包含表格的组件的 history.push 加载的。仅在单击表格行时。

谢谢,我希望这会有所帮助:)

0 投票
1 回答
366 浏览

javascript - react-spring clean scale 和 translateX 转换

react-swipeable-views 库提供了示例用法。我想重用coverflow示例,但在反应功能组合中。方式。我几乎设法让它工作。但是在我的实现中,如果您缓慢滑动(不再应用比例),则可滑动元素可能会在滑动期间卡住。看截图:

在此处输入图像描述

在 react-swipeable 视图的演示中,这在某种程度上没有发生。此示例使用 react-spring 进行动画转换。我提供了一个可重现的stackblitz 演示,也许您可​​以找出问题所在。

零件

0 投票
1 回答
473 浏览

reactjs - Npm 依赖问题:react 17.0.2 和“react-swipeable-views”:“0.13.9”

我正在尝试设置材料仪表板

使用node-16

我跑npm install

我明白了

我该如何解决这个问题。

0 投票
0 回答
314 浏览

javascript - 使用 React swipeable views virtualize 来渲染组件会给它们带来抖动的双重加载动画

对于我的应用程序主页,我使用 VirtualizeSwipeableViews 组件呈现多个组件。更改选项卡时,组件将动画到窗口中,然后很快重新加载。我感觉重新加载是由于 selectedTab 索引的状态更新了两次。如何解决此问题以获得组件之间的平滑过渡?

这是类似用例的演示:https ://codesandbox.io/s/00r0yr6vjn?file=/demo.js

我的代码:

0 投票
0 回答
20 浏览

javascript - 反应可滑动视图导致表格显示大间隙

我使用允许滚动的库。它可以完成这项工作,但问题是存在一个错误,即视图扩展了最大视图的高度。所以第一个视图下面会有很大的空隙。请注意,它仅在组件首次呈现并在我滚动到另一个视图并滚动回第一个视图时消失时才会发生。如果我滚动到另一个视图并返回并且它是库中可用的 animateHeight 道具的结果,基本上问题会自行解决。当视图发生变化时,它基本上会调整高度。但是,我认为每当组件首次呈现(页面刷新后)时我仍然在第一个视图中看到它的原因是因为没有检测到任何更改。所以随着越来越多的用户抱怨这个问题,图书馆引入了这个新功能。它被称为

更新高度

功能。

这是他们在库的此 updateHeight 函数的拉取请求中使用的代码:

然而,这也没有成功。基本上这个函数应该做的是检测孩子何时改变并相应地更新高度。

所以我所做的是进入 SwipeableViews 容器的子项并执行 componentDidMount/componentWillMount/shoudComponentUpdate

但是,它仍然没有bueno。我有什么遗漏吗?

请参阅我的 SwipeableViews 容器代码:

0 投票
1 回答
116 浏览

reactjs - React 可滑动选项卡

我是一个初学者反应用户,并且正在尝试为移动查看器合并简单的可滑动标签。(类似于 instagram 个人资料上的标签)

我找到了 react-swipeable-views 和 Material UI 并尝试使用它。

如果我单击选项卡菜单,它似乎正在工作,但问题是当我滑动选项卡正文时选项卡菜单/索引没有得到更新。

如果有人知道更好的方法来做到这一点或使这项工作,请与我分享你的智慧

谢谢!