IBM Worklight - 无法将标签栏修复到屏幕底部

Question

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

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>

当我尝试此操作时，标签栏仍会显示在屏幕顶部。 我如何在屏幕底部修复它？

Answer 1

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

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

方法文档：

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

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

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

3. 运行方式＆gt;在Worklight Development Server上运行。

4. 由于我没有Android设备，我还添加了iPhone环境，并使用MBS QR code feature在我的设备中加载了应用网络资源。

   在iPhone和Worklight Console预览中，我可以看到并滚动应用程序内容，而Header和TabBar分别固定在顶部和底部。

Full size