sencha-touch - Sencha Touch - 滚动到 TabBar 上的最后一个标签

Question

我的应用程序中有一个包含许多选项卡的视图。我想把重点放在最后一个。我可以设置活动选项卡this.setActiveItem(10)，但我无法（以编程方式）滚动选项卡栏到最后一项。显示了第 10 个选项卡的内容，但隐藏了选项卡栏上的第 10 个项目，因此用户可能会感到困惑。

提前非常感谢。

Answer 1

一个非常好的问题，许多人可能会发现这很有用。

所以首先，tabBar需要实例，这样我们才能activeTab得到tabPanel。然后我们可以很容易地得到标签项的偏移量。在这里，选项卡项不是指保存选项卡内容的容器，而是可以放置在顶部或底部的选项卡指示器。所以我们只需要从容器中偏移活动选项卡项。tabBar

    this.getMyTabPanel().setActiveItem(6);

    var tabBar = this.getMyTabPanel().getTabBar();

    var activeTab = tabBar.getActiveTab();
    var x= activeTab.element.getX();
    var y = activeTab.element.getY();

下一部分是，获取tabBar滚动条的实例。一旦我们得到这个，我们就可以务实地将它滚动到我们在上述步骤中获得的所需位置。

    var scroller = this.getMyTabPanel().getTabBar().getScrollable().getScroller();

    scroller.scrollTo(x,y);

工作演示在这里

---

更新

您还可以在实际滚动时启用动画-

scroller.scrollTo(x, y, true);