IBM Worklight - 无法将标签栏固定到屏幕底部

Posted 2023-02-16

【中文标题】IBM Worklight - 无法将标签栏固定到屏幕底部

【英文标题】：IBM Worklight - Unable to fix tabbar to the bottom of the screen

【发布时间】：2014-01-03 06:09:37

【问题描述】：

我正在尝试开发一个简单的应用程序，它有一个由两个标签组成的页眉和页脚（标签栏）。

HTML：

<div data-dojo-type="dojox.mobile.View" id="Img1">
    <ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
    <li data-dojo-type="dojox.mobile.TabBarButton" icon="images/Arrow-turn-right-icon.png" data-dojo-props="transition:'flip',dir:'-1',moveTo:Home">Label</li>
    </ul>
</div>

当我尝试这样做时，标签栏仍然出现在屏幕顶部。 如何解决屏幕底部的问题？

【问题讨论】：

这是网络应用还是原生应用？如果是原生的，你应该发布你的 xml 布局。

【参考方案1】：

您需要将TabBar 小部件放在scrollableView 而不是View 中。

示例代码：Fixed Header and TabBar in a Worklight-based Dojo app Documentation reference

方法：

创建一个新的 Worklight 6.1.0 项目和应用程序，并选择通过向导向其中添加 Dojo Mobile 框架。添加要测试的环境。Read this training module。

使用富页面编辑器，drag from the Dojo Palette 在 html 文件中将 Heading 小部件和 TabBar 小部件查看到自动生成的 scrollableView div 中。

你当然可以添加图标... 我还为标题设置了fixed="top"，因此它也会被修复。

运行方式 > 在 Worklight 开发服务器上运行。

因为我没有安卓设备，所以我还添加了iPhone环境，并使用MBS QR code feature在我的设备中加载了app web资源。

在 iPhone 和 Worklight Console 预览中，当 Header 和 TabBar 分别固定在顶部和底部时，我能够查看和滚动应用程序内容。

Full size

【讨论】：

当我尝试使用可滚动视图导航时，视图之间的导航不起作用。对此有任何帮助。看看这个问题***.com/questions/20907901/…

但是这个问题是关于 FIXED TABBAR 的；如果您的 TABBAR 现在已修复，则此特定问题已得到解答。请标记为已回答。我会看看另一个问题。

我已经回答了另一个问题。