Question

我要求在移动应用程序的每个屏幕底部都有几个图形按钮。我使用了Graham Acres NotesIn9 presentation (#121)中的逻辑来获取移动控件选项卡栏（xe.tabBar）以加载并保持在屏幕的底部。但是，添加Tab Bar Buttons（xe：tabBarButton）以外的任何内容都会导致控件显示在中心右侧，而不是在中心或左对齐。

这是我试过的代码：

<xe:tabBar
    id="tabBar1">
    <xe:this.dojoAttributes>
        <xp:dojoAttribute
            name="center"
            value="true">
        </xp:dojoAttribute>
    </xe:this.dojoAttributes>
    <xp:image
        url="/BottomButtonHome.jpg"
        id="image1">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="complete">
            <xp:this.action>
                <xe:moveTo
                    direction="Left to Right"
                    targetPage="homepage"
                    transitionType="slide">
                </xe:moveTo>
            </xp:this.action>
        </xp:eventHandler>
    </xp:image>
</xe:tabBar>

这导致右侧演示文稿倾斜，单击图形无法成功打开另一页。

由于这不起作用，我尝试了一个简单的Panel控件（xp：panel）和图形，并且显示效果更好，但链接仍无法打开另一页。这是代码：

<xp:panel
    style="height:54px;width:100%">
    <xp:image
        url="/bottomButtonHome.jpg"
        id="image2">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="complete">
            <xp:this.action>
                <xe:moveTo
                    direction="Left to Right"
                    targetPage="homepage"
                    transitionType="slide">
                </xe:moveTo>
            </xp:this.action>
        </xp:eventHandler>
    </xp:image>
</xp:panel>

Answer 1

从Bootstrap中获取一个页面，看看Font-Awesome是否有适合您的图标。然后只需将其添加到具有相应CSS类

的按钮即可

如何在xe：tabBar中使用图形按钮

1 个答案: