IBM Worklight - 无法将标签栏修复到屏幕底部 [英] IBM Worklight - Unable to fix tabbar to the bottom of the screen

问题描述

我正在尝试开发一个简单的应用程序，其中包含一个标题栏和一个页脚（标签栏），由两个标签组成。

I am trying to develop a simple application that has a header and a footer (tab bar) which consist of two labels.

Html： strong>

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>

当我尝试这个，标签栏仍然出现在屏幕的顶部。
我如何在屏幕底部修复？

When I tried this, the tab bar still appears at the top of the screen. How can i fix that at the bottom of the screen?

推荐答案

您需要将 TabBar 小部件在 scrollableView 中，而不是查看。

You need to place the TabBar widget inside a scrollableView rather than a View.

• 示例代码：工作台中的固定标头和TabBar - 基于Dojo的应用


• 文档参考

• Example code: Fixed Header and TabBar in a Worklight-based Dojo app
• Documentation reference

HowTo：

1. 创建一个新的Worklight 6.1.0项目和应用程序，并选择通过向导向其添加Dojo Mobile框架。添加要测试的环境。阅读本培训模块。

使用Rich Page Editor，从Dojo调色板拖动查看一个标题小部件和一个 TabBar 小部件到自动生成的 scrollableView div 在HTML文件中。

Using the Rich Page Editor, drag from the Dojo Palette view a Heading widget and a TabBar widget into the auto-generated scrollableView div in the HTML file.

• 您当然可以添加图标...


• 我也设置了 fixed =top为标题，所以它也将被修正。
  
  

• You can of course add icons...
• I've also set fixed="top" for the Header so it'll be fixed as well.
  
  

运行在Worklight开发服务器上运行

Run As > Run on Worklight Development Server.

由于我没有安装Android设备， iPhone环境，并使用 MBS装载我的设备中的应用程序网络资源QR码功能。

Because I don't have an Android device, I also added the iPhone environment and loaded the app web resources in my device using the MBS QR code feature.

在iPhone和Worklight控制台预览中，我可以看到并滚动应用内容，而Header和TabBar固定在顶部和底部。

In both iPhone and Worklight Console preview I was able to see and scroll the app contents while the Header and TabBar are fixed at the top and bottom respectively.

全尺寸

这篇关于IBM Worklight - 无法将标签栏修复到屏幕底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！