首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >固定离子卡在屏幕顶部的离子3

固定离子卡在屏幕顶部的离子3
EN

Stack Overflow用户
提问于 2017-11-03 22:03:06
回答 1查看 6.8K关注 0票数 3

我正在试着修复屏幕顶部的一张卡。我正试着在<ion-content>上这样做,但经过几次尝试后,我没有解决它。我尝试过使用ion-fixed,但它也不起作用。

我想修复代码的这一部分:

代码语言:javascript
复制
<ion-card text-center>
   <ion-card-content>
      <h5 style=" font-size: 180%;"> {{selectedItem | noneSelectedItem}}
      </h5>
   </ion-card-content>
</ion-card>

然后,它遵循一个列表:

代码语言:javascript
复制
<ion-card style="background-color:rgb(177, 55, 47);" >
   <br>
   <p class="titleCard">Lista de la carta</p>
   <ion-card-content>
      <ion-list class="accordion-list" >
         <!-- First Level -->
         <ion-list-header *ngFor="let item of information; let i = index" no-lines no-padding>
           <!-- Toggle Button -->
           <button ion-item (click)="toggleSection(i)" detail-none [ngClass]="{'section-active': item.open, 'section': !item.open}">
             <ion-icon item-left name="arrow-forward" *ngIf="!item.open"></ion-icon>
             <ion-icon item-left name="arrow-down" *ngIf="item.open"></ion-icon>
             {{ item.name }}
           </button>
      etc...

所以我的疑问是,当我滚动列表时,如何将第一张卡片放在固定的位置。

非常感谢。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-03 22:37:53

默认情况下,ion-content具有原生滚动功能,因此您只能将ion-content更改为滚动或不滚动。解决方案(在您的情况下)将是将卡放在ion-content之外。

以块/会话为单位的离子页面结构:

代码语言:javascript
复制
<ion-header>
   <ion-navbar>
      <ion-title>Header</ion-title>
   </ion-navbar>
   <ion-toolbar>
      <ion-title>Subheader</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  ...
</ion-content>
<ion-footer>
  ...
</ion-footer>

您需要做的是将一张卡放入Subheader,因此请执行以下操作:将您想要设置的卡放在ion-content之外。在使用ion-content之前,请使用ion-。

代码语言:javascript
复制
<ion-header>
   <ion-navbar>
      <ion-title>Header</ion-title>
   </ion-navbar>
   <ion-toolbar>
      <ion-card text-center>
        <ion-card-content>
          <h5 style=" font-size: 180%;"> {{selectedItem | noneSelectedItem}}
          </h5>
        </ion-card-content>
      </ion-card>
  </ion-toolbar>
</ion-header>
<ion-content>
  THE REST OF YOUR CARDS
</ion-content>
<ion-footer>
  ...
</ion-footer>

或者尝试添加多个标头

代码语言:javascript
复制
<ion-header>
  <ion-title>Header</ion-title>
</ion-header>
<ion-header>
   <ion-card text-center>
            <ion-card-content>
              <h5 style=" font-size: 180%;"> {{selectedItem | noneSelectedItem}}
              </h5>
            </ion-card-content>
    </ion-card>
</ion-header>
票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47097649

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档