如何在 Ionic 中自定义上拉页脚的高度？

Question

在此示例中，使用了 ion-pullup.js，但是此示例工作正常，但拉起页脚会覆盖整个 window。我希望上拉页脚是 window 高度的一半。我该怎么做？

检查以下代码：

HTML:

<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 Template</title>

  <link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.3.0/js/ionic.bundle.min.js"></script>
  <script src="https://rawgit.com/arielfaur/ionic-pullup/master/dist/ion-pullup.js"></script>
</head>

<body ng-controller="MyCtrl">

  <ion-header-bar>
    <h1 class="title">Ionic Pullup sample 3</h1>
  </ion-header-bar>

  <ion-view class="has-header" padding="true">
    <ion-content>
      <div class="list card">
        <div class="item item-divider">Upcoming</div>
        <div class="item item-body item-stable">
          <div>
            You have <b>229</b> meetings on your calendar tomorrow.
          </div>
        </div>
      </div>
    </ion-content>
    <ion-pull-up-footer class="bar-calm">
      <div class="title" ion-pull-up-trigger>Tap me or drag me</div>
      <ion-pull-up-handle width="120" height="15" icon-expand="ion-chevron-up" icon-collapse="ion-chevron-down" style="border-radius: 5px 5px 0 0">
      </ion-pull-up-handle>
      <ion-pull-up-content scroll="false">
       <div class="list card">
        <div class="item item-divider">Other Updates</div>
         <div class="item item-body">
          <div>
           There was a fire in <b>sector 13</b>
          </div>
        </div>
       </div> </ion-pull-up-content>
      </ion-pull-up-footer>
  </ion-view>
</body>

</html>

JS:

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

.controller('MyCtrl', function($scope) {

});

Answer 1

您可以使用 max-height 设置页脚的最大高度。

<ion-pull-up-footer  max-height="200" class="bar-calm">

如果您想动态更改此值，我帮不了您。但我认为这应该是可能的。但也许一个固定值就足以满足您的要求。

顺便说一下：有一个正在运行的 plunker 或 codepen 示例真的很有用！！！

如何在 Ionic 中自定义上拉页脚的高度？

How can i customize height of pull up footer in Ionic?

css-position

footer

angularjs

ionic-framework