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

【问题标题】：IBM Worklight - Unable to fix tabbar to the bottom of the screenIBM Worklight - 无法将标签栏固定到屏幕底部
【发布时间】：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 布局。

标签： android dojo ibm-mobilefirst

【解决方案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

【讨论】：

当我尝试使用可滚动视图导航时，视图之间的导航不起作用。对此有任何帮助。看看这个问题stackoverflow.com/questions/20907901/…
但是这个问题是关于 FIXED TABBAR 的；如果您的 TABBAR 现在已修复，则此特定问题已得到解答。请标记为已回答。我会看看另一个问题。
我已经回答了另一个问题。