【问题标题】:Ionic framework and bottom fixed content离子框架和底部固定内容
【发布时间】:2014-08-01 16:00:05
【问题描述】:

我正在尝试使用登录表单(用户/密码文本输入 + 1 个按钮)实现一个简单的页面。我想将此表单修复到离子含量的底部。但它不起作用。

HTML:

<ion-view hide-nav-bar="true">
<ion-content padding="true">

    <img class="logo" src="img/logo.jpeg" />

    <div class="login-form">
        <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>

</ion-content>

我想将 div.login-form 设置为“固定”。

使用以下 CSS 不起作用:

{
    position: fixed;
    bottom: 20px;
}

此外,使用 position:fixed 输入文本似乎不再可编辑。

在 Ionic 中,是否可以将部分内容固定到底部? 谢谢!

【问题讨论】:

    标签: ionic-framework


    【解决方案1】:

    您可以在ion-content 中使用任何带有按钮的东西。

    Demo

      <ion-list>
    
        <ion-item ng-repeat="item in items" 
                  item="item"
                  href="#/item/{{item.id}}">
          Item {{ item.id }}
    
        </ion-item>
    
      </ion-list>
    
    </ion-content>
    
    <div class="fixed-outside">
      <div class="row">
            <div class="col">
                <button class="button button-circle button-energized icon ion-log-in"></button>
            </div>
            <div class="col">
                <button class="button button-circle button-positive icon ion-social-facebook"></button>
            </div>
        </div>
    
        <p class="text-center"><a href="#/app/forgot-password">Forgot password</a></p>
    </div>
    </div>
    

    【讨论】:

    • 这不是我所需要的:我想将整个表单固定在底部,而不仅仅是一排标签/按钮。我试图将所有内容都放在一个 ion-footer-bar 中,但它似乎不起作用。
    • 但这不是无法使用的方式。对于小型应用程序来说这很好,但对于具有模块结构的大型应用程序,它需要花费更多的精力来控制并使得在现有应用程序中添加独立插件更加困难
    • 如果输入超出 ion-content 会导致键盘覆盖输入
    【解决方案2】:

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

    <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>
    

    您也可以参考:http://ionicframework.com/docs/api/directive/ionScroll/

    希望对你有帮助。

    【讨论】:

    • 我认为这不是一个好的解决方案,因为如果页面大于或小于 1000px 它不会到底部...
    【解决方案3】:

    你想在底部固定的所有元素都应该在ion-content之外。这是一个工作示例:

    <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>
    

    【讨论】:

    【解决方案4】:

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

    Codepen

    相关 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>
    

    CSS

    .scroll-content {
      position: relative;
    }
    
    div.login-form {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
    }
    

    指令

    .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 能以某种方式自行处理。
    【解决方案5】:

    如何使用默认的离子标签栏并将高度更改为自动或您希望的任何像素。只需确保将代码放在 ion-content 标签下方即可。

    代码:

    <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 示例:http://codepen.io/ridwan/pen/JozeYK

    【讨论】:

      【解决方案6】:

      我最终或多或少地绕过了 Ionic 的意图并使用了弹性盒布局:

      <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 的 mixins 的 SCSS 看起来像这样:

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

      【讨论】:

        【解决方案7】:

        实际上我使用的是 Ionic 2.0.0 版本,我用这个代码解决了

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

        在你的文件 Scss 中

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

        【讨论】:

          猜你喜欢
          • 2018-06-11
          • 1970-01-01
          • 1970-01-01
          • 2015-05-15
          • 2020-10-25
          • 1970-01-01
          • 2017-07-31
          • 1970-01-01
          • 2016-09-17
          相关资源
          最近更新 更多