Unten div in</ ion-content>

Ich habe eine ionische(first version) app. Ich habe ein Problem, wenn ein Div im unteren Bereich implementiert ist, wenn der Klassen-Scroll automatisch aktiv ist.Unten div in</ ion-content>

Ich habe diese stucture:

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

Ich habe versucht, absolute Positionierung mit unten 0 aber din't Arbeit.

Aber der div ist nie in dem unteren

Dank!

Quelle

2016-08-09 user2209728

Versuchen Sie es mit <ion-footer> statt einer benutzerdefinierten Klasse: http://ionicframework.com/docs/components/#footer

Quelle

2016-08-09 22:59:28 amuramoto

Ich habe das gleiche Problem :(ich einen Druck Bildschirm tat.. Http://prntscr.com/c3qq16 – user2209728

1. Option - Fußzeile immer auf dem Bildschirm.

hinzufügen class="has-footer"-<ion-content> und statt

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

Verwendung

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

wie folgt aus:

<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. Option - Fußzeile wird nur angezeigt, wenn der Bildlauf aktiv ist (used codepen).

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>

Quelle

2016-08-10 09:47:06

Vielen Dank für Ihre Antwort Das ist es Aber ich wollte Fußzeile div bis 20px runter und wann scroll erschienen ist Jetzt ist es immer fix und sichtbar – user2209728

@ user2209728 So etwas wie das http://codepen.io/xAlien95/pen/PwbPdr? –

Das ist es :) Aber mit 4 Artikel haben Sie ein Problem mit der Fußzeile. http://codepen.io/anon/pen/Lkrwdv Aber mit Ein- und Ausblenden. Ist es möglich? – user2209728

Unten div in</ ion-content>

Antwort

Verwandte Themen