使搜索栏粘在标题/标签上答案

【问题标题】：Make search bar stick to the header/tabs ionic使搜索栏粘在标题/标签上
【发布时间】：2017-07-23 11:54:32
【问题描述】：

我在 ionic 上执行 pull 以刷新我的搜索。当我下拉刷新结果时，搜索栏也被拉下。如何让搜索栏元素粘在标题或标签上，所以只有搜索结果被拉下。

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Pull to Refresh</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>
  <body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Pull To Refresh</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list list-inset">
      <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Search">
      </label>
    </div>
      <ion-refresher on-refresh="doRefresh()">

      </ion-refresher>
      <ion-list>
        <ion-item ng-repeat="item in items">{{item}}</ion-item>
      </ion-list>
    </ion-content>

  </body>
</html>

这里是 https://codepen.io/cafe3/pen/GWZXgx

如果我将搜索栏放在<ion-content> 之外，如果选项卡位于顶部，它将被选项卡阻止（我认为在 Android 上，选项卡将位于顶部）。如果标签位于顶部，我希望搜索栏停留在顶部或标签上，这样它就不会被离子刷新器拉下有什么办法可以解决这个问题？

【问题讨论】：

ionicframework.com/docs/components/#bar-inputs检查一下
它把搜索栏放在标题上。如果标签位于顶部和标题中，我想要标签下方的搜索栏

标签： css ionic-framework css-position

【解决方案1】：

你应该使用header和sub-header，看看我做的这个codepen，我只是没怎么玩css

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $timeout) {
  $scope.items = ['Item 1', 'Item 2', 'Item 3'];
  
  $scope.doRefresh = function() {
    
    console.log('Refreshing!');
    $timeout( function() {
      //simulate async response
      $scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4);

      //Stop the ion-refresher from spinning
      $scope.$broadcast('scroll.refreshComplete');
    
    }, 1000);
      
  };
  
});

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Pull to Refresh</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    
  </head>
  <body ng-controller="MyCtrl">
    <ion-nav-bar class="bar-stable" align-title="center">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
<ion-tabs class="tabs-icon-only tabs-color-active-assertive">

  <!-- Dashboard Tab -->
  <ion-tab title="Status" icon-off="icon ion-home" icon-on="icon ion-home" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <!-- Search Tab -->
  <ion-tab title="Chats" icon-off="ion-search" icon-on="ion-search" href="#/tab/search">
    <ion-nav-view name="tab-search"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Account" icon-off="ion-person" icon-on="ion-person" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>
</ion-tabs>
    
    <div class="bar bar-header bar-positive">
      <h1 class="title">Pull To Refresh</h1>
    </div>
     <div class="bar bar-subheader">
      <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Search">
      </label>
    </div>
    <ion-content class="has-subheader">

      <ion-refresher on-refresh="doRefresh()">
                     
      </ion-refresher>
      <ion-list>
        <ion-item ng-repeat="item in items">{{item}}</ion-item>
      </ion-list>
    </ion-content>
    
  </body>
</html>

http://codepen.io/k185/pen/xdxVPa?editors=1010

【讨论】：