javascript - 在 Angular/Ionic 应用程序中保持标题固定在滚动条上

Question

目前，当不动产有限的用户决定在我的应用程序中向下滚动时，他们会看到以下内容:

实际上，我希望修复 What are you looking for? 和 Current location 的标题项:

到目前为止，这是我的代码:

<ion-view view-title="Nearby">
  <ion-content>
    <!-- Search -->
    <div class="list">
      <div class="item item-input-inset" style="border: 0px; padding-bottom: 0px; background-color: #2784c9;">
        <label class="item-input-wrapper">
          <input type="search" placeholder="What are you looking for?" style="width: 100%" ng-model="services" ng-click="showLocations=false; showServices=false">
        </label>    
      <div class="item item-input-inset" style="border-top: 0px; background-color: #2784c9; margin-left: -2px;">
        <label class="item-input-wrapper">
          <input type="search" placeholder="Current location" style="width: 100%" ng-model="location" ng-click="showLocations=true; showServices=true">
        </label>
        <button class="button button-positive button-small" ng-click="location=''; services=''">
          <i class="ion-close"></i>
        </button>
      </div>
    </div>

      <!-- List of services -->
    <div class="list" style="margin-top:-24px">
      <ion-list>
        <ion-item ng-repeat="service in serviceList | filter:services" href="#/app/services/{{service.id}}" class="item-icon-right" ng-hide="showServices">
          {{service.title}}
          <i class="icon ion-chevron-right icon-accessory">
                        <span class="badge badge-positive">{{service.total}}</span>
                    </i>
        </ion-item>
      </ion-list>
    </div>

    <!-- List of regions -->
    <div class="list" style="margin-top:-24px">
      <ion-list>
        <ion-item ng-repeat="location in locationList | filter:location track by $index" href="#/app/locations/{{location.id}}" ng-click="setLocation(location)" class="item-icon-right" ng-show="showLocations">
          {{location.title}}
          <i class="icon ion-chevron-right icon-accessory">
                        <span class="badge badge-positive">{{location.count}}</span>
                    </i>
        </ion-item>
      </ion-list>
    </div>

  </ion-content>
</ion-view>

我还在这里创建了一个 CodePen:http://codepen.io/anon/pen/VeQzBv .

Answer 1

你可以为此使用一个子标题，它适用于我的代码:

 <ion-header-bar class="bar-light bar-subheader">
      <input type="text" placeholder="Search Force" data-ng-model="searchForce">
      <button ng-if="searchForce.length"
              class="button button-icon ion-android-close input-button"
              ng-click="clearSearch()">
      </button>
</ion-header-bar>

Codepen demo

另请参阅此帖子以了解一些替代方案:http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721