如何在 NativeScript-Vue 中构建固定页脚？

Posted 2023-04-14

【中文标题】如何在 NativeScript-Vue 中构建固定页脚？

【英文标题】：How to build a fixed footer in NativeScript-Vue?

【发布时间】：2019-03-15 21:16:03

【问题描述】：

我想在页面中有一个固定的页脚，但我尝试使用

<StackLayout>

还有一个

position: absolute;
bottom: 0;

在容器父级

position: relative

但什么也没发生。

我试过了

<AbsoluteLayout bottom="0">

然后什么也没发生。

有人知道怎么做吗？谢谢！

【参考方案1】：

<AbsoluteLayout> 将元素绝对放入其中。使用 NativeScript，我们必须使用 Layout Containers 在其中放置元素。

实现您想要的最佳布局：

1) <DockLayout>，例如

<DockLayout>
  <Label dock="bottom"  backgroundColor="yellow" text="footer"/>
  <Label text="rest of the content"/>
</DockLayout>

2) <GridLayout>，例如

<GridLayout columns="*, 60">
  <Label col="0" text="rest of the content"/>
  <Label col="1" text="footer"/>
</GridLayout>

请学习layout containers documentation。

【讨论】：

好的，谢谢！另一个问题是我想在页脚内插入一个带有三个锚链接的文本，我该怎么做？例如，我有：<DockLayout> <Label dock="bottom" class="footer" text="footer" /> </DockLayout> 但我想添加一个文本，其中包含一个锚链接：我该怎么做？

您确实需要深入研究文档，@P1_10。或者查看一些类似这样的演示应用程序：github.com/tralves/groceries-ns-vue。在本机应用程序中，我们避免使用“锚链接”，而是使用<Button>s。在你的情况下，我会嵌套一个<GridLayout>。比如：<DockLayout> <GridLayout dock="bottom" class="footer" columns="*,*,*" > <Button text="button 1" col="0"/> <Button text="button 2" col="1"/> <Button text="button 3" col="2"/> </GridLayout> </DockLayout>