Ionic-framework: 专长：适用于 Android 的可滑动标签

创建于 2016-01-20 · 83评论 · 资料来源: ionic-team/ionic-framework

类型：壮举

离子版本： 2.x

平台： android 4.4 webview

如果有一个 swipeable tabs 指令会很棒，或者至少在 ion-tabs 指令中允许 swipeable tabs 选项，这样我们就可以在标签之间滑动。

这是默认在 Android 的 Material Design 中实现的（http://developer.android.com/design/patterns/swipe-views.html#between-tabs），所以也许这应该只适用于 Android 平台。我在 Ionic 2.x 中请求它，因为我已经看到 Material Design 已集成到 Ionic 中。

它的一个例子是这个：
SlideTabs Gif

我发现这里有一个实施试验： https ://github.com/JKnorr91/ion-slide-box-tabs，但是它有很多缺陷。

我确信这可以使用 ion-slide-box 指令来实现，但根据文档，它将被弃用，我不确定新的 API（在任何地方都找不到）

stale issue

资料来源

Sturgelose

👍70 ❤8

最有用的评论

如果标签本身也是可滑动的，那就太好了（而且合乎逻辑）：

ionic

GoNode5 于 2016-02-24

👍54 ❤20

所有83条评论

有一个 PR 来演示如何在具有 ion-slides 和 ion-segment 的 ionic v2 中做到这一点，示例代码位于源代码测试文件夹中：
https://github.com/driftyco/ionic/pull/4970

3dd13 于 2016-01-21

@3dd13 ，非常感谢，我去看看！我在问题中进行搜索，但我找不到这个提交！

另外，我希望它运作良好，因为通常的问题是更改选项卡时没有选项卡动画

Sturgelose 于 2016-01-22

👍1

昨天刚刚为 Android 发布了我的 Ionic 2 应用程序 GitNinja，并收到了希望能够在选项卡之间滑动的用户的三条评论。这是人们在 Android 上习惯的，所以我认为这个功能会很棒。

jgw96 于 2016-01-31

lordgreg 于 2016-02-03

nicobytes 于 2016-02-11

👍1

如果标签本身也是可滑动的，那就太好了（而且合乎逻辑）：

ionic

GoNode5 于 2016-02-24

👍54 ❤20

Android（Windows Phone）至少需要选项卡之间的页面转换。这是 Android 应用程序的标准行为。在没有页面转换的情况下切换实际上看起来很奇怪 - 特别是标签栏中的标签更改动画效果很好。滑动支持当然是完美的。

rdesimone 于 2016-04-29

👍2

+1 这是 Android 上的核心原生用户体验

pantonis 于 2016-05-17

👍5

+1 此功能是我从用户那里收到的最频繁的请求

hlehmann 于 2016-05-17

👍1

+1 这里这个功能也是最常见的请求

ghost 于 2016-05-17

👍2

+1（也适用于 iOS）

cosemansp 于 2016-05-27

👍2

我很惊讶这不在 v1 中。我猜是因为 UI 更侧重于 iOS？（或者至少我有那种印象）

dasilvacontin 于 2016-06-06

@dasilvacontin是正确的。在 Ionic 2 中，我们将材料设计与 ios 设计（：

jgw96 于 2016-06-06

👍2

我的应用程序已准备好投入生产，但如果没有可滑动的标签，我无法将其上线。

pantonis 于 2016-06-07

👍1

+1 我的应用也是...
:+1:

ghost 于 2016-06-07

MateuszG 于 2016-06-08

👍1

我第一次在 github 上 +1 评论😄

ladmerc 于 2016-06-09

😄5 👍1

kingstakh 于 2016-06-17

😄1

chocolei 于 2016-06-18

👍1

这里还有一个 UX 要求... +1

dgroh 于 2016-06-26

从 beta 3 移到 beta 12。:(

pantonis 于 2016-06-28

😕8 👎4 🎉1 👍1

@pantonis真的很期待这个功能..

kitkimwong 于 2016-06-28

😕3

我期待 beta.3 的这个功能
针对 Android 的应用程序非常需要的功能

prijindal 于 2016-07-03

😕1

正确实现它是一个复杂的功能，我们仍然需要修复一些事情和离子滑梯。但它在我们的优先事项之间！

也可以看看：
https://github.com/driftyco/ionic/issues/7075
https://github.com/driftyco/ionic/issues/7049
https://github.com/driftyco/ionic/issues/6726
https://github.com/driftyco/ionic/issues/5508

manucorporat 于 2016-07-03

👍4

+1 期待这个

filipsuk 于 2016-07-05

+1 我只等待两件事将我的应用程序迁移到 ionic 2：可滑动标签和网络工作者支持。

victorivens05 于 2016-07-12

👍3

barocsi 于 2016-07-18

👎1

dennissch 于 2016-07-21

👎1

+1 应尽快添加到 Ionic 1 和 Ionic 2。

m-vdv 于 2016-07-22

👎1

大家好！我订阅了这个以获得有用的更新。 Ionic 是否有关于 +1 评论的政策？我经常收到有关此的电子邮件，只是发现有人评论了“+1”，这似乎没有建设性。

kz 于 2016-07-22

您好@kz ，我们并没有关于 +1 评论的官方政策，如果可能的话，我建议您更改您的 github 通知设置。此外，每个人都知道我们正计划实施此功能，正如您在 github 右侧看到的那样，它被分配给 beta.12，这意味着您可以在这个版本中期待这个功能。我还想问我们的社区，在您评论 +1 之前，请记住，ionic 的团队以及订阅此问题的任何人（如@kz ）都会在您发表评论时收到通知，包括一封电子邮件，并且最好如果您的评论正在为问题添加内容、想法等。感谢大家！

jgw96 于 2016-07-22

👍7 ❤1 🎉1

我在等待 ionic 2：可滑动标签

sridharan31 于 2016-07-26

👎5 👍2

+1 绝对想用这个。

pjc2007 于 2016-08-03

👎2 👍2

+1 必备功能！！！！！！

NgYueHong 于 2016-08-08

👎2 👍1

为什么它从 beta 12 里程碑中删除？从 beta 3 一路移动到 beta 12，现在甚至没有 beta 12？

NgYueHong 于 2016-08-11

pantonis 于 2016-08-11

👎4

是的，我期待 beta.12 的发布。 beta.12 什么时候发布？

chandanch 于 2016-08-11

👎2 👍1

如果标签可以滑动，那就太好了。

chandanch 于 2016-08-11

👎3

大家好！由于我们已经非常接近我们的 RC 版本，我们决定退后一步，专注于在 beta.12 中显示停止错误。这些错误要么完全破坏应用程序，要么破坏框架的大部分功能。这并不意味着我们不会实现像这个问题这样的新功能，但我们真的想专注于获得我们已经超级稳定和产品准备好的东西。 beta.12 也将更新为 angular 2 rc5，最终应该包括提前编译！

jgw96 于 2016-08-11

👍3

@jgw96您计划发布多少候选版本？如果这不是秘密 :smile:

oktav777 于 2016-08-11

好问题！希望不要太多！ 😃

jgw96 于 2016-08-11

目前我们只有 1 个计划，但可能还有更多。您可以随时在此处查看我们的路线图，了解计划做什么。谢谢！

jgw96 于 2016-08-11

只是一个注释，因为通过这个消息，+1 帖子和评论的涌入将驱使每个听这个线程的人疯狂，他们正在等待关于这个功能的实际消息。您可以使用右侧的订阅按钮获取状态更新。除非你有值得注意的东西，否则你不需要发帖，如果你需要 +1，你可以使用 Github 添加的 +1 表情来减少愤怒，但仍然允许投票。 是时候打破我们都为扩散而感到内疚的 +1 文化了。

判断和对即将推出的功能进行投票所需的所有信息：里程碑及其路线图，以及用于投票的Trello板。

mtpultz 于 2016-08-11

👍8 👎1

谢谢@mtpultz ！我们没有关于 +1 的官方政策，但我们确实要求您记住，订阅此问题的每个人以及 Ionic 的团队都会在对问题发布新评论时收到电子邮件和通知，所以如果评论为问题添加内容、想法、建议等，而不仅仅是 +1，我们将不胜感激。同样，这不是官方政策或任何东西，只是要记住的东西。

jgw96 于 2016-08-11

👍3

1 用于滑动标签此功能何时发布？

chandanch 于 2016-08-17

👎5 😕2

我记得它是 Windows 用户交互指南的一部分吗？
也许这个功能也应该默认添加到 Windows 平台。

infinnie 于 2016-08-19

期待这个功能，一直在努力在我非常复杂的应用程序上运行它......

Tapiwachin 于 2016-08-21

👍1

你好！我们正在将我们的功能请求移至新的功能请求文档。我已将此功能请求移至文档，因此我将暂时关闭此问题。感谢您使用离子！

jgw96 于 2016-09-02

@jgw96 ，嘿嘿，我是本期的原创发帖人！
我一直在努力避免垃圾邮件，因为我看到了大量的 +1 或“我也需要这个”消息。

无论如何，您在文档中移动所有功能请求很好，但是，作为一个小想法（以帮助更改此过程），也许在文档中添加“喜欢”的数量或每个问题都具有相关性，因为现在感觉就像一长串按发布时间排序的问题。到目前为止，我们有点知道你优先考虑了这个，但是还有其他问题，所以这个功能被停止了。我只是这么说，因为问题不仅在于功能，还在于元数据（人们的反应，虽然不是说所有这些都是相关的）。
好吧，现在看到那个文件，我想说它让任何人都感到有点迷茫，这将是你的下一步..

因此，为了避免丢失此元数据，也许（作为一个快速的想法，除了将其写在文档中），将来如何允许人们对功能进行投票，就像我们在这里所做的那样。我相信它真的会帮助您决定下一个要实现的功能；）像这样的小型网站，创建需要大约 1-2 小时或更短的时间，许多其他开源或类似项目都有一个工具像这样 ;）

但无论如何，非常感谢所有 Ionic 团队的辛勤工作，很高兴看到这个伟大的框架看起来如此棒，很快就会成为 RC :D

干杯!

编辑：如果其他人同意，请随时在帖子中添加反应，但不是作为消息，而是作为适当的 +1 反应（请参阅消息右上角的按钮？是的，有 :D）

Sturgelose 于 2016-09-02

👍8

@Sturgelose感谢您的想法！实际上，我们现在正在试验 zenhub（抱歉有任何混淆），所以我们甚至可能不会保留 google doc 功能列表的想法。因此，我现在重新打开这个问题。

jgw96 于 2016-09-02

👍3

大家好。

这意味着http://ideas.ionic.io/ideas/top没有被使用？

此功能是基于大众投票的社区优先级的第二个功能。事情是，没有给出任何消息，我想知道该网站是否有用，现在这是一个确认？

无论如何，祝贺你做得很好，谢谢。

victorivens05 于 2016-09-02

👍3

@victorivens05与该站点有些混淆，它_not_ 用于 Ionic Framework，它用于 Ionic Cloud。我们需要解决这个问题。

感谢大家的反馈，这肯定在名单上，但我们需要先把 RC 拿出来，这应该很快就会发生。

mlynch 于 2016-09-08

希望这将是 RC1 的里程碑......

NgYueHong 于 2016-09-29

👎1

@NgYueHong还没有加入 RC0？

infinnie 于 2016-09-29

👎2 😕1

@infinnie我在更新日志中没有看到任何提及它，这个问题仍然存在。

NgYueHong 于 2016-09-29

👍2 👎1

这应该是优先级 1 哈哈！ +1
我希望它不使用ion-slides实现。
这搞砸了 ionic 1 中的 UX。当用户尝试像在普通原生应用程序中那样更快地滚动时，选项卡会发生变化。虽然这不是官方的。

当使用ion-slides时， Fast scrolling和sliding tabs不会齐头并进。

慢慢来，但如果不使用幻灯片会很棒。

所有最好的离子团队👍

uzumakinaruto123 于 2016-10-01

👍3 👎1

我已经更新了4970 ，它使用片段和幻灯片来处理 RC0。

它可作为要点https://gist.github.com/aarjithn/d282b019f6046f0de2f0ded623554313 获得。

我看到的唯一问题是标签本身不可滑动。

https://github.com/leoruhland/ion-slides-tabs看起来很整洁，如果有人可以将它移植到 ionic2 那就太好了。

aarjithn 于 2016-10-10

👍4 ❤1 🎉1

您好尝试了您的建议和示例；
并实施；适用于 beta 2 版本。
好像：

#
screen shot 2016-10-14 at 18 41 01

我正在寻找的是增强一点“火种 UI”：

不是标签 UI，只是图标
在中心有一个标志的地方
具有选定选项卡的活动类

tinder-ui

有什么想法可以修改这个例子吗？

Rubytastic2 于 2016-10-14

可滑动的标签会很棒，但用离子幻灯片实现它们并不是最佳选择，至少如果你想在其中一个中保留一个单独的导航堆栈，至少不是这样。

Alx101 于 2016-10-20

同意@Alx101 。
我的建议是在 tab/segment 标签上使用一个属性。像“离子扫描=真”。

这种改进将非常棒，我日复一日地等待着！ :)

谢谢！

ghost 于 2016-10-20

是否还有计划将此功能包含在 ionic2 中？自 2016 年 7 月 29 日以来的任何框架会议中均未提及。从第一天开始我就在等待这个功能......

Hollerweger 于 2016-10-20

👍2

也许这应该放在一个新问题中，因为这个问题已经关闭，并且可能已经从“管道”中流下来，有利于未解决的问题？

Alx101 于 2016-10-20

大家好，这个问题还没有解决。这里有一个公开的 PR： https://github.com/driftyco/ionic/pull/7185。然而，它需要重新审视。最新的目标是我们希望我们的 Segment 组件在设计/功能上与Material Design Tabs组件相同，包括滑动的能力。为了实现这一目标，还需要做很多工作。虽然我们很乐意花一些时间在这方面，但我们目前正专注于修复一些错误并改进现有框架。不过，我会将其添加到里程碑中，以便我记得重新访问它。感谢您的耐心等待，我们知道这是一个备受追捧的功能，我们绝对希望将它纳入框架！

brandyscarney 于 2016-10-20

👍13 🎉4

sergiomilici 于 2016-10-21

👎3 👍1

+1 用于可滑动部分！

ghost 于 2016-10-21

👎7

关于如何将其更改为看起来像火种滑动标签的任何想法更新？
我们可以删除顶部的选项卡或重新设置它们的样式以使其看起来像 tinder UI，还是有其他方法可以做到这一点？

滑动标签工作正常，基本上我想删除标签指示器并用图标替换它。

Rubytastic2 于 2016-10-27

👍1

替换这个：

<ion-toolbar>
    <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
        <ion-segment-button value="first">
            Profiel
        </ion-segment-button>
        <ion-segment-button value="second">
            Voorstellen
        </ion-segment-button>
        <ion-segment-button value="third">
            Account
        </ion-segment-button>
    </ion-segment

在不丢失“状态”的情况下突出显示或显示某个图标。
有什么想法吗？

另外，加载滑动标签内容的最佳做法是什么？
将整个应用程序放在这个slidingpage.html 中还是最好有单独的页面并根据页面名称将它们加载到选项卡中？

Rubytastic2 于 2016-10-27

captura de pantalla 2016-11-18 a las 10 08 56
:(

gbelmm 于 2016-11-18

😕6 👎4

甚至不知道为什么这些叫 rc.x :)

barocsi 于 2016-11-21

@gbelmm仅仅因为我们将其从里程碑中移出并不意味着我们没有致力于它或没有认真对待它。我们尝试最多每两周发布一次，这意味着一些更难的东西将不得不等待，因为我们不想把损坏的东西发给你们所有人（尽管我们会犯错误）。

我们试图做到非常透明，但我们从不保证问题或功能会在某个时间出现。

这就是软件工程的本质！

mlynch 于 2016-11-21

👍14 ❤3

@mlynch我知道这个问题或功能很难，因为 iOS 上没有默认行为。我希望我的应用程序具有此功能，但我知道这很难，所以请花点时间，因为您应得的，哈哈，你们经常在制作 RC 方面做得很好。

Fdom92 于 2016-12-03

@jgw96为什么现在从里程碑中删除此功能？ :(

NgYueHong 于 2016-12-17

😕1

我也在等待这个功能：/

kodeine 于 2016-12-17

👎2

我做了一个 2 swipedTabs 的简单示例，希望它会有所帮助，直到我完成完整的插件。
优酷链接

 github链接

newsof1111 于 2016-12-18

👍4

伙计们，他们正在研究 RC，这意味着他们只专注于修复 2.0.0 功能上的错误。所以首先将是最终的 2.0.0 版本，然后他们可能会在 2.1 或 2.0.1 中引入新功能，所以请耐心等待。我也在等这个，所以等等。

就这样：）

Fdom92 于 2016-12-18

👍3

如果在一年内无法解决如此高评价的功能，我只是有点担心 ionic 2 架构。

Hollerweger 于 2016-12-18

👎1 👍1

好的，伙计们，这里的问题的OP。是的，这需要很长时间，但是伙计们，我们必须意识到 Ionic 2 在去年几乎是从零开始创建的，这意味着没有太多时间来处理像这样的大功能。因此，在 1 年内让这样一个平台从 beta 到接近发布是一项巨大的成就。此外，如果我们仔细阅读所有评论（并摆脱垃圾邮件），您会发现该功能正在延迟，因为有先决条件。从更上层的帖子复制：

正确实现它是一个复杂的功能，我们仍然需要修复一些事情和离子滑梯。但它在我们的优先事项之间！
也可以看看：
7075
7049
6726
5508

在所有这些问题中，所有问题都已关闭，但最后一个仍然开放的问题仍然需要工作。

是的，我同意，这个功能有很多请求，而我是第一个 😏 但我们必须明白，如果他们为我们提供了一个实施不当的功能，我们也会继续抱怨，我相信他们不想当他们知道由于之前列出的问题而无法正常工作时，会提供糟糕的体验。所以，我宁愿再等一会儿，并拥有一个正确实现的功能，而不是试图破解代码。另外，我们仍然可以在不滑动的情况下使用选项卡式视图，这还不错。

总之，伙计们，让我们对他们有耐心和信任。不管怎样，我会借此机会祝大家圣诞和假期快乐！

额外评论：
拜托，我们对延误和所有事情都有相同的想法。请记住，这里的消息是通知每个订阅的人。除非是有建设性的事情，否则尽量克制自己。否则，您可以随时使用对帖子的反应！ 👍

Sturgelose 于 2016-12-18

👍17

这有什么解决办法吗？

thegust 于 2017-01-19

👎3 👍1

@adamdbradley @brandyscarney @mlynch @jgw96

thegust 于 2017-01-19

👎5

太棒了，2.0版终于发布了。现在让我们在下一次更新中集成这个期待已久的可滑动标签功能。

NgYueHong 于 2017-01-26

如果您不想等待官方组件，您可以使用两个滑块来创建您自己的“Swipeable Tab”组件。
我正在使用两个滑块（在 ion-navbar 和 ion-content 区域内）并让它们相互控制。

@ViewChild('pageSlider') pageSlider: Slides;
@ViewChild('headerSlider') headerSlider: Slides;
...
this.headerSlider.control = this.pageSlider;
this.pageSlider.control = this.headerSlider;

这对我的应用程序（rc6 或 final）非常有效。

dominikstrasser 于 2017-01-27

👍1

我不敢相信没有这个功能就宣布了 2.0。如果这没有实现，那么对于用户来说，应用程序不是原生的，因为这是每个 android 应用程序都期望的。

joekukish 于 2017-01-27

👎1 👍1

嘿大家，

我们知道这对你们所有人来说都是一个重要的功能。我们很清楚这是我们需要添加的；它位于我们功能列表的顶部。我们的目标是发布 2.0 最终版，修复一些错误，然后再次开始添加功能。相信我，我们很乐意将大部分时间花在添加功能上，但是当存在阻止我们用户使用他们的应用程序的错误时，这是不可能的。这并不像在某些选项卡中添加一些 CSS 那样简单。这将需要更新我们的段组件，确保它与其他手势正确交互，添加额外的样式等等。

在这个问题上添加评论要求更新会让我们分心。出于这个原因，我将锁定这个问题。当我们有新闻要分享时，我们会更新这个问题。感谢您的耐心等待。 🙂

brandyscarney 于 2017-01-27

此页面是否有帮助？

0 / 5 - 0 等级

Ionic-framework: 专长：适用于 Android 的可滑动标签

最有用的评论

所有83条评论

7075

7049

6726

5508

相关问题