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

Posted 2023-02-26

【中文标题】Sencha Touch - 滚动到 TabBar 上的最后一个标签

【英文标题】：Sencha Touch - scroll to last tab on TabBar

【发布时间】：2013-05-22 07:31:54

【问题描述】：

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

非常感谢。

【参考方案1】：

一个非常好的问题，很多人可能会觉得这很有用。

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

工作demo is here

---

更新

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

scroller.scrollTo(x, y, true);

【讨论】：

演示链接不起作用。请您提供一个有效的链接@SachinGutte