我正在尝试在本机脚本中创建一个底栏。我的第一次尝试是基于非常基本的想法。我正在考虑使用字体awesome然后将单词放在图标下方。我的问题是有没有这个或网站的样本xml,其中xml像bootsnip for bootstrap以及下面的代码是否是完成图片中描述的目标底部导航栏的好方法。
<DockLayout stretchLastChild="true">
<StackLayout dock="bottom" verticalAlignment="bottom" stretch="fill">
<StackLayout orientation="horizontal" horizontalAlignment="center">
<Label text="Home" dock="left" backgroundColor="red"></Label>
<Label text="Medications" dock="left" backgroundColor="green"></Label>
<Label text="Medication Detail" dock="left" backgroundColor="blue"></Label>
<Label text="Whatever" backgroundColor="yellow"></Label>
</StackLayout>
</StackLayout>
</DockLayout>
答案 0 :(得分:3)
您可以使用NativeScript Tab View Sample code
或强>
试试这个: 您可以将ScrollView替换为ListView
<GridLayout rows="*, auto, auto">
<ScrollView row="0">
<StackLayout row="0" backgroundColor="#eeeeee">
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
<Label text="Hello world" textWrap="true"></Label>
</StackLayout>
</ScrollView>
<StackLayout height="2" backgroundColor="#777" row="1"></StackLayout>
<GridLayout class="foot" columns="*,*,*,*" row="2">
<Label col="0" text="" textWrap="true"></Label>
<Label col="1" text="" textWrap="true"></Label>
<Label col="2" text="" textWrap="true"></Label>
<Label col="3" text="" textWrap="true"></Label>
</GridLayout>
</GridLayout>
.foot {
background-color: #ccc;
}
.foot label {
text-align: center;
vertical-align: middle;
padding: 10;
font-size: 20;
}