离子:具有固定区域布局的可滚动区域
Ionic: Scrollable areas with fixed areas layout
我在开发的一个应用程序中遇到了一些问题,在该应用程序中,客户希望有一些包含选项卡和过滤器的固定区域,以及一个包含在选项卡和过滤:
我尝试了不同的选项来完成此布局,但在每种情况下都遇到了一些问题:
- 将所有主要区域(黄色 + 蓝色)包裹在不可滚动的区域中 ion-content,使蓝色区域可滚动,并用 flexbox 覆盖屏幕的其余部分。问题:无限滚动不起作用,因为它需要 ion-content 作为可滚动区域。感觉布局不是很扎实,可能会出其不意。此外,从用户体验的角度来看,大多数用户习惯于在整个屏幕上滚动,而不仅仅是在一个区域上滚动
- 在蓝色区域周围使用 ion-content 标签。问题:header 和页脚错位
- 我认为最好的方法是:将 ion-content 包裹在黄色和蓝色区域周围,并使黄色区域浮动(slot="fixed")。问题:我不想在蓝色区域设置固定的上边距,因为这个高度可能会根据所使用的设备而改变。也许这可以通过编程方式完成,但我宁愿只用 CSS
此外,也许可以在 ion-header 中包含黄色区域,但我发现这非常不灵活,而且难以构建。在这种情况下,选项卡 headers 将在 ion-header 中,而内容在 ion-content 中,从我的角度来看这似乎很奇怪。
有什么实现方法吗?
将固定的内容放入header本身包裹在离子行中
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Header Title</ion-title>
</ion-toolbar>
<ion-row class="filter-row">
<ion-col>
<span>All</span>
</ion-col>
<ion-col>
<span>High</span>
</ion-col>
<ion-col>
<span>Medium</span>
</ion-col>
<ion-col>
<span>Low</span>
</ion-col>
<ion-col>
<span>No Priority</span>
</ion-col>
</ion-row>
</ion-header>
如果您不想将标签放入 header,这里是您可以使用的第二种解决方案
将 header 下面顶部的固定标签和其他你想固定的东西包裹到 div 中,并用这些 [=18= 添加粘性位置到 div ] 属性
position: sticky;
top: 0;
z-index: 1;
我在开发的一个应用程序中遇到了一些问题,在该应用程序中,客户希望有一些包含选项卡和过滤器的固定区域,以及一个包含在选项卡和过滤:
我尝试了不同的选项来完成此布局,但在每种情况下都遇到了一些问题:
- 将所有主要区域(黄色 + 蓝色)包裹在不可滚动的区域中 ion-content,使蓝色区域可滚动,并用 flexbox 覆盖屏幕的其余部分。问题:无限滚动不起作用,因为它需要 ion-content 作为可滚动区域。感觉布局不是很扎实,可能会出其不意。此外,从用户体验的角度来看,大多数用户习惯于在整个屏幕上滚动,而不仅仅是在一个区域上滚动
- 在蓝色区域周围使用 ion-content 标签。问题:header 和页脚错位
- 我认为最好的方法是:将 ion-content 包裹在黄色和蓝色区域周围,并使黄色区域浮动(slot="fixed")。问题:我不想在蓝色区域设置固定的上边距,因为这个高度可能会根据所使用的设备而改变。也许这可以通过编程方式完成,但我宁愿只用 CSS
此外,也许可以在 ion-header 中包含黄色区域,但我发现这非常不灵活,而且难以构建。在这种情况下,选项卡 headers 将在 ion-header 中,而内容在 ion-content 中,从我的角度来看这似乎很奇怪。
有什么实现方法吗?
将固定的内容放入header本身包裹在离子行中
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Header Title</ion-title>
</ion-toolbar>
<ion-row class="filter-row">
<ion-col>
<span>All</span>
</ion-col>
<ion-col>
<span>High</span>
</ion-col>
<ion-col>
<span>Medium</span>
</ion-col>
<ion-col>
<span>Low</span>
</ion-col>
<ion-col>
<span>No Priority</span>
</ion-col>
</ion-row>
</ion-header>
如果您不想将标签放入 header,这里是您可以使用的第二种解决方案
将 header 下面顶部的固定标签和其他你想固定的东西包裹到 div 中,并用这些 [=18= 添加粘性位置到 div ] 属性
position: sticky;
top: 0;
z-index: 1;