模态页面上 NativeScript 中滚动视图的粘性页眉和页脚

Question

有没有办法在模态页面上实现带有粘性页眉和页脚的滚动视图。像这样

这是我已经准备好的，但是包含社交按钮的 GridLayout 被截断了。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally" class="test">
  <StackLayout orietation= "veritcal" class="mainstack">
    <GridLayout rows="auto" columns="*, auto">
      <label text="{{title}}" textWrap="true" class="size16b align-center" col="0" row="0" />
      <Button text="&#xE5CD;" horizontalAlignment="right" tap="closePage" class="btn" col="1" row ="0"/>
    </GridLayout>
    <ScrollView>
      <ios><HtmlView class="stack" html="{{htmlString}}" /></ios>
      <android><WebView class="stack" src="{{htmlString}}" id="andWebView"/> </android>
    </ScrollView>
    <GridLayout rows="auto" columns="*, *, *, *" class="gridLay">
        <Button text="&#xf099;" horizontalAlignment="center" tap="closePage" class="socialbtn" col="0"/>
        <Button text="&#xf230;" horizontalAlignment="center" tap="closePage" class="socialbtn" col="1"/>
        <Button text="&#xf16d;" horizontalAlignment="center" tap="closePage" class="socialbtn" col="2"/>
        <Button text="&#xf166;" horizontalAlignment="center" tap="closePage" class="socialbtn" col="3"/>
    </GridLayout>
  </StackLayout>
</Page>

这是什么结果： Truncated Social Icons

这就是我将 GridLayout 移到 Html/WebView 之前并涂鸦我希望得到的结果： Hoping to get something with social icon at the bottom

Answer 1

尝试用网格布局替换外部堆栈布局。

如果你给页眉和页脚固定高度和滚动视图 * 它应该工作。

模态页面上 NativeScript 中滚动视图的粘性页眉和页脚

Sticky Header and Footer for ScrollView in NativeScript on a Modal Page

nativescript