Nativescript Vertical Screen Slide / ViewPager

时间:2016-10-30 18:13:18

标签: android nativescript angular2-nativescript

在Nativescript中实现屏幕幻灯片的最简单方法是什么,如Android Viewpager所示,但在垂直方向?此功能的另一个示例是rss reader feedly,您可以通过向上/向下滑动来更改RSS Feed。

页面应允许垂直滚动到顶部/底部,然后在某个阈值后转换。

我已经遇到了nativescript-slides,它只能进行水平滑动。

那么是否有“nativescript”方式或者我必须将其实现为原生android / ios功能(例如by this)?在任何一种情况下,如何将其集成到nativescript中的样本都会很棒。

更新

录制了一个例子:

enter image description here

取自this Repo Android原生代码。未完成的PR进行了更改以在列表中提供垂直滚动。但是回购似乎已经过时了,而且有点儿错误。

3 个答案:

答案 0 :(得分:1)

我可以在以后提供更多信息但是有一个新的插件实现Android和iOS的原生控件用于幻灯片/旋转木马她https://github.com/alexrainman/nativescript-carousel-view和垂直滑动是他的雷达,我想他甚至可能接近完成。

答案 1 :(得分:0)

为任何对上述嵌套滚动动画感兴趣的人提供答案:

对于Android,我必须在Nativescript中实现原生ReyclerView,以支持NS buildin ListView。它是一个优化的视图结构,除其他外允许嵌套(垂直)滚动,可以用作普通列表的替代。

https://github.com/alexrainman/nativescript-carousel-view一起工作就像一个魅力!

答案 2 :(得分:0)

到此为止的任何人仍在寻找实现这一目标的方法。

我花了很多时间试图找到一种方法来实现这一目标,并试图为此找到合适的插件。还尝试使用Alexrainman的插件,但由于该插件不是最新的nativescript版本,最终放弃了。

我的解决方案: 我将radListView用作此实现的基础,并利用了radListView上的方法和事件。

通过使用滚动事件,我收集了用于滚动功能的数据:滚动速度和滚动方向。 (这些也可以从事件数据中获取,但是由于我没有从Nativescript文档中找到事件详细信息,因此我放弃了尝试猜测在事件模型中从何处找到该数据的信息。)

然后,我还将一个项目的固定高度保存在列表中(我将其高度固定为screenHeight-200)。

有了所有这些信息,我设法钩住了“ ScrollDragEnded”事件,并添加了使我的列表像垂直滑块一样运行的逻辑。通过“ scrollToIndex”方法在列表上移动,并利用上述所有数据找出要滚动的索引以及何时滚动。

这是我设法制作出很好的垂直幻灯片的方法。

祝你好运!

相关问题