使搜索欄堅持標題/選項卡離子

我實現拉來刷新我對離子的搜索。當我拉下來刷新結果時，搜索欄也被拉下。如何使搜索欄元素粘貼到頁眉或標籤，所以只有搜索結果被拉下。使搜索欄堅持標題/選項卡離子

<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上，標籤將在頂部）。我希望搜索欄粘在頂部或標籤，如果選項卡位於頂部，所以它不會被離子刷新下拉任何方式來解決這個問題？

來源

2017-03-03 Tom Kur

的http：// ionicframework.com/docs/components/#bar-inputs檢查它 –

它將搜索欄放在標題處。如果選項卡位於頂部和標題，我需要標籤下方的搜索欄 –

你應該用頭和子頭，看看這個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

來源

2017-04-12 13:22:17 k185

使搜索欄堅持標題/選項卡離子

回答

相關問題