Question

我有一个离子 (first version)应用。当类滚动自动激活时，我在底部实现div时遇到问题。

我有这样的结构：

<ion-view>
    <ion-nav-title>Ionic test</ion-nav-title>
    <ion-content>
        <div style="background-color: red; height: 200px;"></div>
        <div class="bar bar-footer bar-balanced">
            <div class="title">Footer</div>
        </div>
    </ion-content>
</ion-view>

我试图用底部0 来定位绝对值，但是没有工作。

但div从不在底部

谢谢！

Answer 1

尝试使用<ion-footer>而不是自定义类：http://ionicframework.com/docs/components/#footer

Answer 2

<强> 1。选项 - 页脚始终在屏幕上。

将class="has-footer"添加到<ion-content>，而不是

<div class="bar bar-footer bar-balanced">
            <div class="title">Footer</div>
        </div>

使用

<ion-footer-bar align-title="center" class="bar-balanced">
  <h1 class="title">Footer</h1>  
</ion-footer-bar>

像这样：

<ion-view>
    <ion-nav-title>Ionic test</ion-nav-title>
    <ion-content class="has-footer">
    <div style="background-color: red; height: 200px;"></div>
</ion-content>
<ion-footer-bar align-title="center" class="bar-balanced">
  <h1 class="title">Footer</h1>  
</ion-footer-bar>
</ion-view>

<强> 2。选项 - 仅当滚动处于活动状态时才会显示页脚（used codepen）。

＆＃13;

angular.module('ionicApp', ['ionic'])

.directive('stickyFooter', function($document) {
  return {
    restrict: 'A',
    link: function($scope, $element, $attr) {
      var footer = $document[0].querySelector('.stickyFooter');
      var content, height, reverse, x;
      $element.bind('scroll', function(e) {
        content = $document[0].querySelector('.scroll-content').offsetHeight;
        height = $document[0].querySelector('.scroll').offsetHeight;
        reverse = -footer.offsetHeight;
        x = height + reverse - e.detail.scrollTop - content;
        if (x>reverse && x<=0) {
          footer.style[ionic.CSS.TRANSFORM] = 'translate3d(0,'+x+'px,0)';
        } else if (x<=reverse) {
          footer.style[ionic.CSS.TRANSFORM] = 'translate3d(0,'+reverse+',0)';
        } else {
          footer.style[ionic.CSS.TRANSFORM] = 'translate3d(0,0,0)';
        }
        // console.log(e.detail.scrollTop);
      });
    }
  }
})

.controller('MyCtrl', function($scope, $document, $ionicPosition) {
  
  $scope.items = [
    { id: 0 },
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9 },
    { id: 10 },
    { id: 11 },
    { id: 12 }
  ];
  
});

＆＃13;

p { 
  padding: 20px !important; }
.stickyFooter {
  padding: 20px;
  width: 100%;
  background: grey;
  bottom: -60px;
  position: absolute; 
  
  -webkit-animation: fadein 10s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 10s; /* Firefox < 16 */
        -ms-animation: fadein 10s; /* Internet Explorer */
         -o-animation: fadein 10s; /* Opera < 12.1 */
            animation: fadein 10s;

}
ion-content[sticky-footer] .scroll {
  padding-bottom: 60px; }

/ *FadeIN */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

＆＃13;

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List Directive</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">
      <div class="buttons">
      <h1 class="title">Ionic test</h1>
      </div>
    </ion-header-bar>

    <ion-content sticky-footer scroll-event-interval="1">
      
      <p>This is some data.</p>
      
      <ion-list>

        <ion-item ng-repeat="item in items" item="item">
          Item {{ item.id }}
        </ion-item>

      </ion-list>

    </ion-content>
      
    <!-- Here's the stiky footer -->
      
    <div class="stickyFooter">Footer.</div>
      
  </body>
</html>

＆＃13;

底部div

2 个答案: