底部div </ion-content>

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.選項 - 僅當滾動處於活動狀態時才會顯示頁腳（使用的代碼集）。

 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 } ]; });

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

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

底部div </ion-content>

問題描述

2 個解決方案

解決方案1
0 2016-08-09 22:59:28

解決方案2
0 2016-08-10 09:47:06

底部div </ion-content>

問題描述

2 個解決方案

解決方案1 0 2016-08-09 22:59:28

解決方案2 0 2016-08-10 09:47:06

解決方案1
0 2016-08-09 22:59:28

解決方案2
0 2016-08-10 09:47:06