时间戳

首页 > 解决方案 > Nativescript ScrollView 不滚动

javascript - Nativescript ScrollView 不滚动

问题描述

我对 Nativescript 开发相当陌生，我有一个由 GridLayout 包裹的 ScrollView，在 ScrollView 内我放置了各种 StackLayouts，但是滚动布局根本不起作用，其中一个堆栈布局（黄色）显示为居中，任何想法我的代码有什么问题？

<template>
<Page class="background-color:white;">
    <ActionBar class="bg_blue_marine">
    </ActionBar>
    <GridLayout rows="*,auto" columns="*" style="width:100%; height:100%;">
        <ScrollView row="0" col="1" orientation="vertical" style="width:100%; height:auto; background-color:rgb(200,200,200);">
            <StackLayout style="width:100%; height:400px; background-color:red;"></StackLayout>
            <StackLayout style="width:100%; height:400px; background-color:yellow;"></StackLayout>
        </ScrollView>
        <FlexBoxLayout row="1" col="1" style="width:100%; height:80px; align-items:center; justify-content:space-around; background-color:white;"></FlexBoxLayout>
    </GridLayout>
</Page>
</template>

标签： javascriptandroidiosvue.jsnativescript

解决方案

<GridLayout rows="300,*" columns="*">
        <ScrollView height="300" orientation="vertical">
    <StackLayout orientation="horizontal" horizontalAlignment="center" row="0" col="0" style="background-color:rgb(200,200,200);">

            <StackLayout orientation="horizontal" horizontalAlignment="center"
                style="width:50%; height:400; background-color:red;"></StackLayout>
            <StackLayout orientation="horizontal" horizontalAlignment="left"
                style="width:50%; height:400; background-color:yellow;"></StackLayout>
    </StackLayout>
</ScrollView>

    <FlexBoxLayout row="1" col="0"
        style="width:100%; height:80; align-items:center; justify-content:space-around; background-color:white;">
    </FlexBoxLayout>
</GridLayout>

将提供以下结果[1]：https ://i.stack.imgur.com/m4TAG.png

我不确定您是否可以将 ScrollView 作为 GridLayout 的一行，您应该使用任何 Layout 来代替。另外，您不能有px高度和宽度的单位。另外，每当使用 StackLayout 时，请使用 'orientation' 和 'alignment' 属性。

推荐阅读