ionic-framework - Ionic 3:如何在顶部修复 ion-list-header 并仅滚动列表项,而不滚动 ion-content?
问题描述
我在页面上有一个离子列表,我只想滚动列表项,而不是整个离子内容。
这是我的代码:
<ion-content scroll="false" no-padding>
<ion-list>
<ion-list-header>Select your Status</ion-list-header>
<ion-scroll style="width:100%; height:100vh" scrollY="true">
<ion-item>
<h2>Available</h2>
</ion-item>
<ion-item>
<h2>Busy</h2>
</ion-item>
<ion-item>
<h2>At school</h2>
</ion-item>
<ion-item>
<h2>At the movies</h2>
</ion-item>
<ion-item>
<h2>At work</h2>
</ion-item>
<ion-item>
<h2>Battery about to die</h2>
</ion-item>
<ion-item>
<h2>Can't talk, text only</h2>
</ion-item>
<ion-item>
<h2>In a meeting</h2>
</ion-item>
<ion-item>
<h2>At the gym</h2>
</ion-item>
<ion-item>
<h2>Sleeping</h2>
</ion-item>
<ion-item>
<h2>Urgent calls only</h2>
</ion-item>
</ion-scroll>
</ion-list>
</ion-content>
我想修复列表标题“选择您的状态”并仅滚动其他列表项,但即使我已将 scroll="false" 设置为 ion-content,它也会隐藏列表标题。请帮忙。提前致谢。
解决方案
你可以这样做:
html
<ion-header>
<ion-list-header>Select your Status</ion-list-header>
</ion-header>
<ion-content scroll="false" no-padding>
<ion-list>
<ion-scroll style="width:100%; height:100vh" scrollY="true">
<ion-item>
<h2>Available</h2>
</ion-item>
...
</ion-scroll>
</ion-list>
</ion-content>
定位你的ion-list-header
内部ion-header
以使其具有粘性
结果:
推荐阅读
- python - 可以通过 CLI 设置 Python OpenAPI 生成器中的客户端验证吗?
- string - Linq 将缺少的项目从一个字符串列表添加到另一个列表
- node.js - 有没有办法检测窗户是否发出噪音?
- r - 在R中合并两个具有相似数据的数据框
- angular - TypeError:this.networkService.getRequest(...).pipe 不是 ionic Angular 中的函数
- javascript - 如何使用 Vanilla JavaScript 从 span 元素中删除样式属性
- python - 是否可以使用具有容差的 np.isclose 并合并原始数据框?
- php - Windows子系统debian(WSL)上PHP中的pg_connect错误500
- amazon-web-services - ECS Fargate 任务无法访问另一个账户中的 s3
- python - 从非结构化文本数据中读取第一行