Ionic framework 离子骨架与底部固定含量

我试图实现一个带有登录表单的简单页面（用户/密码文本输入+1按钮）。我想把这个表格固定在离子内容的底部。但它不起作用

HTML:

此外，位置：固定输入文本似乎不再可编辑

在Ionic中，是否可以将部分内容固定到底部？

---

谢谢

您可以使用

离子内容

中的任何内容，其中有一个按钮

项目{{Item.id}

我只是找到了一个简单的解决方案，对我来说效果很好

<ion-content>
    <ion-scroll style="height: 300px">
    <div style="height: 1000px">
        your scroll content
    </div>>
    </ion-scroll>
    <div>
        your fixed div, maybe a form
    </div>
</ion-content>

您的滚动内容
>
你的固定div，可能是一个表单

您也可以参考：

---

我希望它能有所帮助。

您希望固定在底部的所有元素都应该在

离子内容之外。这是一个工作示例：

<ion-view title="Test" hide-nav-bar="true">
<ion-content class="padding">
   <img class="logo" src="img/logo.jpeg" />
</ion-content>

<!-- align to the bottom of the page -->
  <div class="login-form" style="position: absolute; bottom: 0px; width: 100%">
    <div class="list">
        <label class="item item-input light-text-input">
            <input type="text" placeholder="user" ng-model="user">
        </label>
        <label class="item item-input light-text-input">
            <input type="text" placeholder="password" ng-model="password">
        </label>
    </div>

    <div class="row">
        <div class="col">
            <button class="button button-block button-energized">Login</button>
        </div>
        <div class="col">
            <button class="button button-block button-positive">FB Login</button>
        </div>
    </div>

    <p class="text-center"><a href="#/app/forgot-password">Forgot password</a></p>
</div>


登录
FB登录


您可以使用指令来计算表单的高度。它将在调整窗口大小时重新计算。我还没有测试过离开页面导航


相关HTML

<ion-view hide-nav-bar="true" ng-controller="MainCtrl">
  <ion-content padding="true" scroll="false">
    <ion-scroll scroll-height>
       Content to go above the form
    </ion-scroll>
    <div class="login-form">
      Login form
    </div>
  </ion-content>
</ion-view>

指示

.directive('scrollHeight', function($window) {
  return {
    link: function(scope, element, attrs) {
      scope.onResize = function() {
        var winHeight = $window.innerHeight;
        var form = angular.element(document.querySelector('.login-form'))[0];
        var formHeight = form.scrollHeight;
        var scrollHeight = winHeight - formHeight;

        element.css("height", scrollHeight + "px");
      }
      scope.onResize();

      angular.element($window).bind('resize', function() {
        scope.onResize();
      })
    }
  }
})

使用默认的ionic选项卡栏，将高度更改为auto（自动）或任何您想要的px（像素），怎么样。只要确保你把代码放在ion内容标签下面

代码：

<ion-content padding="true">
</ion-content>  
  <div class="tabs tabs-dark" style="height:auto;">
    <div class="row">
      <div class="col">
        <div class="list">
          <label class="item item-input">
            <span class="input-label">Username</span>
            <input type="text">
          </label>
          <label class="item item-input">
            <span class="input-label">Password</span>
            <input type="password" >
          </label>
        </div>
        <div class="row">
          <div class="col">
            <button class="button button-block button-positive">LOGIN</button>                         
          </div>
        </div>
      </div>
    </div>
  </div>


用户名
密码
登录

Codepen示例：
我或多或少地绕过了爱奥尼亚的意图，使用了一种灵活的盒子布局：

<ion-view view-title="My Title" class="flex-wrapper" hide-nav-bar="true">
    <div class="flex-head"> ... </div>
    <div class="flex-body flex-1"> ... </div>
    <div class="flex-foot"> ... </div>
</ion-view>

事实上，我使用的是我用这段代码解析的Ionic 2.0.0版本

<ion-fixed class="fixed">
 <button fab fab-right fab-bottom>
   ${{ totalPrice }}
 </button>
</ion-fixed> 

这并不是我所需要的：我想固定整个表单的底部，而不仅仅是一行标签/按钮。我试着把所有的东西都放在一个ion的页脚栏里，但它似乎不起作用。但这不是一种无法使用的方式。对于小型应用程序来说，这是好的，但对于模块结构的大型应用程序来说，需要更多的努力来控制和制造更多的困难。在现有的应用程序中添加独立的插件，以防输入超出ion内容会导致键盘覆盖输入。我不认为这是一个好的解决方案，因为如果页面大小大于或小于1000px，它将无法访问底部…我把这个放进小提琴里了。这是你期待的吗？我不知道为什么这样更好，但我已经修复了你的损坏图像，这样我们可以看到发生了什么：似乎没有滚动。谢谢你，但我真的希望爱奥尼亚能够自行处理。
.directive('scrollHeight', function($window) {
  return {
    link: function(scope, element, attrs) {
      scope.onResize = function() {
        var winHeight = $window.innerHeight;
        var form = angular.element(document.querySelector('.login-form'))[0];
        var formHeight = form.scrollHeight;
        var scrollHeight = winHeight - formHeight;

        element.css("height", scrollHeight + "px");
      }
      scope.onResize();

      angular.element($window).bind('resize', function() {
        scope.onResize();
      })
    }
  }
})

<ion-content padding="true">
</ion-content>  
  <div class="tabs tabs-dark" style="height:auto;">
    <div class="row">
      <div class="col">
        <div class="list">
          <label class="item item-input">
            <span class="input-label">Username</span>
            <input type="text">
          </label>
          <label class="item item-input">
            <span class="input-label">Password</span>
            <input type="password" >
          </label>
        </div>
        <div class="row">
          <div class="col">
            <button class="button button-block button-positive">LOGIN</button>                         
          </div>
        </div>
      </div>
    </div>
  </div>

<ion-view view-title="My Title" class="flex-wrapper" hide-nav-bar="true">
    <div class="flex-head"> ... </div>
    <div class="flex-body flex-1"> ... </div>
    <div class="flex-foot"> ... </div>
</ion-view>

.flex-wrapper {
    @include display-flex;
    @include flex-direction(column);
    ...
}

.flex-1 {
    @include flex(1);
    ...
}

<ion-fixed class="fixed">
 <button fab fab-right fab-bottom>
   ${{ totalPrice }}
 </button>
</ion-fixed> 

.fixed {
 bottom: 50px;
 right: 10px;
}