首页 文章

使搜索栏坚持 Headers /标签离子

提问于
浏览 次
1

我在离子上搜索时实现了pull刷新 . 当我下拉刷新结果时，搜索栏也被拉下来 . 如何使搜索栏元素坚持 Headers 或标签，以便只搜索结果被拉下来 .

<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上，选项卡将位于顶部） . 如果标签位于顶部，我希望搜索栏粘在顶部或标签处，这样它就不会被离子复原机拉下来任何方法来解决这个问题？

css ionic-framework css-position

1 回答

  • 0

    你应该使用 Headers 和子 Headers ，检查我做的这个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

    回复于

相关问题