模态页面上NativeScript中ScrollView的粘滞页眉和页脚

时间:2017-03-13 19:28:16

标签: nativescript

有没有办法在模态页面上实现带有粘性页眉和页脚的滚动视图。 像这样Sticky Header/Footer with ScrollView in between

这就是我已经存在的内容,但包含社交按钮的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

1 个答案:

答案 0 :(得分:4)

尝试使用gridlayout替换外部stacklayout。

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