Question

在我的NativeScript Angular项目中，我根本无法滚动页面。我是NativeScript的新手，所以它可能很简单，但我不确定。

这是我的html：

<ActionBar title="Information" class="action-bar"></ActionBar>
<GridLayout class="pageBackground">
	<ScrollView orientation="vertical">
		<StackLayout class="main-container">
			<TextField style="margin-top: 3%;" class="form-control" hint=" First Name" returnKeyType="Next" autocorrect="false" autocapitalizationType="none"></TextField>
			<TextField class="form-control" hint=" Last Name" returnKeyType="Next" autocorrect="false" autocapitalizationType="none"></TextField>
			<TextField class="form-control" hint=" Password" secure="true" returnKeyType="Next" autocorrect="false" autocapitalizationType="none"></TextField>
			<TextField class="form-control" hint=" Confirm Password" secure="true" returnKeyType="Next" autocorrect="false" autocapitalizationType="none"></TextField>
			<WrapLayout orientation="horizontal" style="width: 90%; height: 7%; margin-bottom: 3%;">
				<Button text="Male" class="genderButtons" style="border-top-left-radius: 5; border-bottom-left-radius: 5;"></Button>
				<Button text="Female" class="genderButtons" style="border-top-right-radius: 5; border-bottom-right-radius: 5;"></Button>
			</WrapLayout>
            <Button [text]="schoolButtonText" style="border-radius: 5; height: 7%; background-color: white; width: 90%; color: rgb(0, 122, 255);" (tap)=selectSchool()></Button>
			<WrapLayout orientation="horizontal" style="margin-left: 5%; width: 95%; margin-top: 3%;">
				<Label text="Basketball" style="color: white; font-size: 18; font-weight: bold; margin-right: 3%; width: 75%"></Label>
				<Switch [checked]="basketballSwitch"></Switch>
			</WrapLayout>
			<WrapLayout orientation="horizontal" style="margin-left: 5%; width: 95%; margin-top: 2%">
				<Label text="Dodgeball" style="color: white; font-size: 18; font-weight: bold; margin-right: 3%; width: 75%"></Label>
				<Switch [checked]="dodgeballSwitch"></Switch>
			</WrapLayout>
			<WrapLayout orientation="horizontal" style="margin-left: 5%; width: 95%; margin-top: 2%">
				<Label text="Football" style="color: white; font-size: 18; font-weight: bold; margin-right: 3%; width: 75%"></Label>
				<Switch [checked]="footballSwitch"></Switch>
			</WrapLayout>
			<WrapLayout orientation="horizontal" style="margin-left: 5%; width: 95%; margin-top: 2%">
				<Label text="Softball" style="color: white; font-size: 18; font-weight: bold; margin-right: 3%; width: 75%"></Label>
				<Switch [checked]="softballSwitch"></Switch>
			</WrapLayout>
			<WrapLayout orientation="horizontal" style="margin-left: 5%; width: 95%; margin-top: 2%">
				<Label text="Soccer" style="color: white; font-size: 18; font-weight: bold; margin-right: 3%; width: 75%"></Label>
				<Switch [checked]="soccerSwitch"></Switch>
			</WrapLayout>
			<WrapLayout orientation="horizontal" style="margin-left: 5%; width: 95%; margin-top: 2%">
				<Label text="Volleyball" style="color: white; font-size: 18; font-weight: bold; margin-right: 3%; width: 75%"></Label>
				<Switch [checked]="volleyballSwitch"></Switch>
			</WrapLayout>
			<Button class="btn btn-primary btn-rounded-sm" style="width: 90%; height: 7%; padding: 0px; background-color: black; color: white; vertical-align: bottom;"
			 text="Finish" (tap)=finishSignUp()></Button>
		</StackLayout>
	</ScrollView>
</GridLayout>

这是我的CSS：

.pageBackground{
    background-image: url('https://backgroundtown.com/content/images/thumbs/0002610_classic-texture-dark-cool-gray.jpeg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.main-container{
    height: 100%;
    width: 100%;
}

非常感谢！

编辑-添加了CSS

Answer 1

请更喜欢共享NativeScript Playground项目而不是代码段，以便每个人都可以在一秒钟内在真实设备上运行您的示例。

这里是到一个看起来像您的链接的链接，但进行了一些修改（删除了敲击功能，选中的开关始终为true）：https://play.nativescript.org/?template=play-ng&id=uAu1Fb&v=2如果内容超出屏幕实际显示的内容，则它将开始滚动，否则行为不会改变。一旦我添加了内容以填充超出屏幕显示范围的内容，一切都将对我有利。如果您仍然认为仍然存在问题，请立即进行修改并共享链接。

您不需要CSS属性。请注意，只有subset of properties that is working for the moment。

我的页面无法滚动？

1 个答案: