如何使我的离子搜索栏(离子输入)在 Ionic 的顶部导航栏上粘滞不前

Question

我的html表单显示来自JSON API的列表和用于过滤列表的搜索输入框。

我希望这个搜索在顶部是粘性的。下面是我的task.html代码。

<!--
  Generated template for the TaskgivenPage page.
  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>taskgiven</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-searchbar (ionInput)="getItems($event)" style="width:400px; float:right;  "></ion-searchbar>
  <ion-list  *ngFor="let list of displayList;">
    <ion-item class="desc" (click)="ind(list)" >{{list.TASKDESC}}  <br>
      <p style="color:#d2dce1; margin-top:10px" >{{list.PRIMARY}}</p>
      <p style="text-align:right; margin-top:-20px;" [style.color]="list.ENTDT > list.DEADLINE_DT ? 'red' : '#d2dce1'">{{list.DEADLINE_DT}}</p><hr>
    </ion-item>

    <!--<ion-item class="desc1" >{{list.PRIMARY}}</ion-item>-->
  </ion-list>
</ion-content>

我想<ion-searchbar (ionInput)="getItems($event)" style="width:400px; float:right; "></ion-searchbar>在上面粘人

Answer 1

只需将搜索栏放在离子标头内即可。您可以在此处找到工作版本

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
    <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredItems()"></ion-searchbar>
  </ion-navbar>
</ion-header>