在離子選項卡下實現搜索欄

我在項目的「搜索」選項卡下添加搜索欄時遇到問題。我使用類似的邏輯來配置this，但它在ionic serve --lab實時瀏覽器預覽中無法正常工作。搜索欄結尾不夠寬，並且在列表的中間位置過濾。在離子選項卡下實現搜索欄

當我將搜索欄的代碼直接放在html文件的<ion-view>標記之外時，它不會顯示出來。當我把它直接放在<ion-content>標籤內時，它看起來是錯誤的。有關我如何實現這一點的任何提示？

下面是我使用的搜索欄的代碼：

<ion-header-bar class="bar-light bar-subheader"> 
    <input type="search" placeholder="Filter contacts..." ng-model="search" ng-focus="searchFocused = true" ng-blur="searchFocused = false" ng-change="scrollTop()" class="full-width"> 
    <button ng-if="search.length" class="button button-icon ion-android-close input-button" ng-click="clearSearch()"> 
     </button> 
    </ion-header-bar>

來源

2016-06-07 Monkeyanator

你可以爲這個小提琴？ – pradeep1991singh

https://jsfiddle.net/12scby2d/1/ – Monkeyanator

如果你把bar類sub-header您的搜索欄的問題應該可以解決。結帳這裏 -

angular.module('myApp', ['ionic']) 
 
.controller('MainCtrl', function($scope) { 
 
    $scope.clearSearch = function() { 
 
    $scope.search = ''; 
 
    }; 
 
});

.button.button-icon.input-button { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 5px; 
 
    color: #bbb; 
 
} 
 

 
.item img { 
 
    height: 60px; 
 
    width: 60px; 
 
    float: left; 
 
    margin-top: 20px; 
 
    margin-right: 10px; 
 
} 
 

 
.my-item.item { 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
} 
 

 
.full-width { 
 
    width: 100%; 
 
}

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

 
<body ng-app="myApp" ng-controller="MainCtrl"> 
 
    <ion-header-bar class="bar-positive"> 
 
    <h1 class="title">Header</h1> 
 
    </ion-header-bar> 
 
    <ion-header-bar class="bar bar-subheader"> 
 
    <input type="search" 
 
      placeholder="Filter contacts..." 
 
      ng-model="search" 
 
      ng-focus="searchFocused = true" 
 
      ng-blur="searchFocused = false" 
 
      ng-change="scrollTop()" 
 
      class="full-width"> 
 
    <button ng-if="search.length" 
 
      class="button button-icon ion-android-close input-button" 
 
      ng-click="clearSearch()"> 
 
    </button> 
 
    </ion-header-bar> 
 
    <ion-content> 
 
    <ion-list> 
 
     <ion-item class="my-item">item 1</ion-item> 
 
     <ion-item class="my-item">item 2</ion-item> 
 
     <ion-item class="my-item">item 3</ion-item> 
 
     <ion-item class="my-item">item 4</ion-item> 
 
    </ion-list> 
 
    </ion-content> 
 
</body>

來源

2016-06-07 19:27:52 pradeep1991singh

嗯...搜索欄顯示（僅適用於iPhone版本），但1）內容已經消失2）「X」按鈕仍然位於屏幕 – Monkeyanator

在離子選項卡下實現搜索欄

回答

相關問題