Question

我在Ionic中为每个View使用不同的模板。我希望搜索栏保持在同一个位置并允许结果滚动，但目前整个视图都在滚动。想法？

录制专辑

    <span class="item-note">
      Grammy
    </span>
  </button>
  <div class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Search" ng-model="searchTerm">
  </div>
</div>
<ion-list>
  <ion-item class="item-remove-animate item-icon-right" ng-repeat="psalm in psalms | filter: {psalm: searchTerm}" type="item-text-wrap" href="#/tab/psalm/{{psalm.id}}">
    <h2>Psalm {{psalm.psalm}} {{psalm.version}}</h2>
    <p>{{psalm.metre}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>

    </ion-item>
</ion-list>

Answer 1

您需要通过<ion-content>停止为您的父scroll="false"滚动并添加<ion-scroll>。

你的<ion-list>会像这样包裹起来：

<ion-scroll direction="y">
    <ion-list>
        <ion-item class="item-remove-animate item-icon-right" ng-repeat="psalm in psalms | filter: {psalm: searchTerm}" type="item-text-wrap" href="#/tab/psalm/{{psalm.id}}">
            <h2>Psalm {{psalm.psalm}} {{psalm.version}}</h2>
            <p>{{psalm.metre}}</p>
            <i class="icon ion-chevron-right icon-accessory"></i>
        </ion-item>
    </ion-list>
</ion-scroll>

请参阅ion-scroll和ion-content

Answer 2

iWörk的回答是正确的。如果你不能滚动给离子滚动高度。

执行以下步骤。

禁用离子内容<ion-content scroll="false">
将<ion-scroll direction="y" style="height: 500px">添加到您需要滚动的内容

<ion-content scroll="false">
  <ion-scroll direction="y" style="height: 500px">
    <ion-list>
      <ion-item ng-repeat="item in data.items">
        <!-- Content goes here-->
      </ion-item>
    </ion-list>
  </ion-scroll>
</ion-content>

在Ionic

2 个答案: