Question

在这个例子中，使用了ion-pullup.js，但是这个例子工作正常，但是拉起页脚覆盖了整个窗口。我希望上拉页脚是窗口高度的一半。我怎么能这样做？

检查以下代码：

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样本真的很有用!!!

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

1 个答案: