Question

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

;extension=php_curl.dll

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

如果我把搜索栏放在<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>之外，如果标签位于顶部，它将被标签阻止（我认为在Android上，标签位于顶部）。如果标签位于顶部，我希望搜索栏贴在顶部或标签处，这样它就不会被离子刷新器拉下来有办法解决这个问题吗？

Answer 1

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

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

1 个答案: