IBM Worklight - Unable to fix tabbar to the bottom

问题:

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

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?

回答1:

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

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

HowTo:

1. Create a new Worklight 6.1.0 project and application and choose to add to it the Dojo Mobile framework via the wizard. Add an environment to test in. Read this training module.

2. 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.

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

3. Run As > Run on Worklight Development Server.

4. 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.

   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.

Full size