为什么不能让我的页面滚动?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (239)

在我的NativeScript Angular项目中,我无法完全滚动页面。

这是我的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%;
    overflow: scroll;
}
提问于
用户回答回答于

你在你的DIV(主容器)设置了这个了吗?

div.X {
    overflow: scroll;
}

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励