首页 文章

离子3：如何在顶部修复ion-list-header并仅滚动列表项，而不是离子内容？

提问于
浏览 次
2

我在页面上有一个离子列表，我想只滚动列表项，而不是整个离子内容 .

Here is my code:

<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>

image1

image2

我想修复列表 Headers “选择你的状态”并仅滚动其他列表项，但即使我已将scroll =“false”设置为ion-content，它也会隐藏列表 Headers . 请帮忙 . 提前致谢 .

ionic-framework ionic3

2 回答

  • 0

    你可以这样做：

    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 内以使其变粘

    结果：

    enter image description here

    回复于
  • 4

    在ion-list-header标签中添加“sticky”属性 .

    适用于离子2，离子3，离子4

    回复于

相关问题