Question

我是Nativescript UI的新手。如何使用angular2将页脚放置在Nativescript中。

我正在设计包含标签的页面。我需要在一个选项卡中显示列表视图和页脚。列表视图完美如下图所示。我关心的是设计页脚和制作按钮。我对变化没有多少经验。

代码如下：

<TabView [selectedIndex]="tabindex" selectedColor="#FF0000">
<StackLayout *tabItem="{title: 'Appertiser'}" >
    <Label text="Hello, I am Appertiser" marginTop="20" fontSize="20" horizontalAlignment="center" textAlignment="center"></Label>
</StackLayout>
<StackLayout *tabItem="{title: 'Noodles'}" >
    <ListView [items]="products">
        <template let-item="item">
            <GridLayout  rows="auto" columns="auto,*" class="list-wrapper">
                <Image  row="0" col="0" [src]="item.productImage" horizontalAlignment="left"></Image>
                <StackLayout row="0" col="1" orientation="vertical" horizontalAlignment="left" class="productDetail">
                    <Label [text]='item.productName' horizontalAlignment="left" class="productHeading"></Label>
                    <Label [text]='item.productShortDescription'  horizontalAlignment="left" class="productDescription"></Label>
                    <Label [text]='item.productTags'  horizontalAlignment="left" class="productTags"></Label>
                </StackLayout>
                <Image row="0" col="2" [src]="item.iconImage" width="20px" height="20px" horizontalAlignment="right"  verticalAlignment="top" marginRight="10"></Image>
                <GridLayout row="0" col="3" orientation="vertical" verticalAlignment="bottom">
                    <Label [text]='item.productPrice' class="productPrice" textColor="red" horizontalAlignment="right" class="productPrice"></Label>
                </GridLayout>
            </GridLayout>
        </template>

    </ListView>

    <FAB (tap)="toggleNav('Home')" rippleColor="#f1f1f1" class="fab-button"></FAB>


</StackLayout>
<StackLayout *tabItem="{title: 'Seafood'}">
    <Label text="Hello, I am Seafood" marginTop="20" fontSize="20"  textAlignment="left"></Label>

    <GridLayout row="1" column="0" rows="auto" columns="50,*,50" verticalAlignment="bottom" backgroundColor="lightgray" cssClass="footer">
        <Label text="My cat loves the camera" textWrap="true" col="1" colSpan="2" minHeight="50" fontSize="20" margin="3"></Label>
        <Label text="John Smith" col="1" row="1" fontSize="14" horizontalAlignment="left" verticalAlignment="bottom" margin="3"></Label>
        <Label text="comments: 26" col="2" row="1" color="#10C2B0" fontSize="14" verticalAlignment="bottom" margin="3"></Label>
    </GridLayout>
    <GridLayout cssClass="footer" row="1" column="0" rows="auto" columns="50,*,50">
        <Image src="{{flag}}" cssClass="flagimage" col="0" row="0"></Image>
        <Label text="{{lang}}" tap="{{goDefault}}" col="1" row="0" textAlignment="left"></Label>
        <Image src="~/res/icons/white/ellipsis_white.png" cssClass="iconwhitesmall" tap="{{goOther}}" row="0" col="2"></Image>
    </GridLayout>

</StackLayout>

Answer 1

为了熟悉 NativeScript + Angular-2 ，我建议您查看this sample app，其中显示了许多基本方案。

至于你的问题 - 你的“页脚”究竟是什么意思！主页面或菜单的语义页脚layout或footer for list-view controller？答案取决于您的具体需求，因此请分享您迄今为止所做的以及您想要实现的目标的代码。

带有angular2的Nativescript footbar

1 个答案: