带有angular2的本机脚本脚手栏
带有angular2的本机脚本脚手栏
提问于 2016-09-21 02:02:22
我对Nativescript UI非常陌生。如何使用angular2在原生脚本中放置页脚。
我正在设计带有标签的页面。我需要在一个选项卡中显示列表视图和页脚。列表视图工作得很完美，如下图所示。我关心的是设计页脚和工厂按钮。我在更改方面没有太多经验。
代码如下：
<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>
回答 1
Stack Overflow用户
发布于 2016-09-21 17:39:43
为了熟悉NativeScript + Angular-2，我建议您查看this sample app，其中显示了一些基本场景。
至于你的问题--你说的“页脚”到底是什么意思!？主页、菜单或footer for list-view controller的语义页脚layout？答案取决于你的特定需求，所以请分享你到目前为止所做的工作和你正在尝试实现的代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39600849
复制相关文章
相似问题
腾讯云开发者
