Wie blende ich ein Div beim Scrollen in Ionic?

Ich baue eine Anwendung mit Ionic (Version 1) und möchte ein Div aus dem Controller ausblenden, wenn der Benutzer scrollt. Ich stecke fest und weiß nicht, wo ich anfangen soll.Wie blende ich ein Div beim Scrollen in Ionic?

Dies ist mein Code:

<body ng-app="starter" style="padding-top:150px;"> 

    <div ng-controller="AppCtrl" id="header" > 
     <div class="bar-aaa"> 
      <div class="myLogo"> 
       <img src="img/images/logo.png" style="display: block;margin-left:auto;margin-right:auto;height:50px;margin-top:10px;margin-bottom:30px;" alt=""/> 
      </div> 

      <div class="row" style="padding-bottom: 0px;"> 
       <div class="col col-33" style="border-bottom: 2px solid {{oneLine}};margin-bottom: 0;height: 59px;"><a href="javascript:;" ui-sref="app.dashboard" style="display: block;padding: 19px 0px 37px;margin-top: -19px;"><img src="{{one}}" style="display: block;margin-left:auto;margin-right:auto;" alt=""/></a></div> 
       <div class="col col-33" style="border-bottom: 2px solid {{twoLine}};margin-bottom: 0;height: 59px;"><a href="javascript:;" ng-click="allCoupons();" on-swipe-left="allCoupons();" style="display: block;padding: 19px 0px 37px;margin-top: -19px;"><img src="{{two}}" style="height:17px;display: block;margin-left:auto;margin-right:auto;" alt=""/></a></div> 
       <div class="col col-33" style="border-bottom: 2px solid {{threeLine}};margin-bottom: 0;height: 59px;"><a href="javascript:;" ui-sref="app.settings" style="display: block;padding: 19px 0px 37px;margin-top: -19px;"><img src="{{three}}" style="height:17px;display: block;margin-left:auto;margin-right:auto;" alt=""/></a></div> 
      </div> 
     </div> 
    </div> 
    <span ng-show="loading" style="position: absolute;z-index: 99999;margin-left:-75px;top:150px;left:50%;right:50%;background:rgba(0,0,0,0.5);text-align:center;padding:15px;width:150px;" > 
     <div> 
      <ion-spinner icon="spiral"></ion-spinner> 
      <h5 style="color:#fff;">Processing...</h5> 
     </div> 

    </span> 

    <ion-nav-view></ion-nav-view> 


    </body>

Quelle

2017-04-15 Fateh singh Jagdeo

Ihre Frage nicht erklären, was <div> Sie versuchen, und Sie haben versucht, welcher Code zu verstecken bereits zu verwenden, aber können Sie eine Funktion zum on-scroll Richtlinie des zuweisen ion-content und tun, was Sie in dieser Funktion tun möchten. So wie folgt aus:

<ion-content on-scroll="scrollFunction()">

Und dann in die Steuerung über eine Funktion namens scrollFunction oder vorzugsweise etwas anschaulichere hinzuzufügen.

$scope.getScrollPosition = function() { 
    // Here you can do whatever you want when someone is scrolling. 
}

Sie könnte zum Beispiel eine Variable in dieser Funktion aktualisieren und zugewiesen, dass Variable auf den ng-show der <div> Sie anzeigen oder ausblenden möchten.

Um Ihre andere Frage zu beantworten, warum die getScrollPosition() Funktion 0 Rückkehr hält Es ist ein bekanntes Problem, Sie Ähnliche Berichte here finden. Ich bin mir nicht ganz sicher, warum das passiert, aber es scheint, als würde Ionic die Scroll-Position einer anderen Ansicht erfassen, wodurch sie 0 bleibt mit. Es würde wie folgt aussehen:

<ion-content delegate-handle="scrollHandler" on-scroll="getScrollPosition()">

Und dann in Ihrem Controller, sondern die von folgenden Aktionen ausführen:

$ionicScrollDelegate.getScrollPosition().top;

Sie müssen dies tun:

$ionicScrollDelegate.$getByHandle("scrollHandler").getScrollPosition().top;

Das ist das lösen soll Probleme, die Sie erleben.

Quelle

2017-04-15 21:02:41 Dexter

danke, aber in getScrollPosition Funktion verwende ich $ ionicScrollDelegate.getScrollPosition(). Top aber es gibt immer 0, wie es zu lösen? –

Könnte sein, dass Ionic die falsche Bildlaufansicht erfasst, können Sie sicherstellen, dass dies geschieht, indem Sie einen 'Delegat-Handle' zuweisen und diesen verwenden, um die Bildlaufposition zu erhalten. Ich füge ein Beispiel zu der obigen Antwort hinzu. – Dexter

Wie blende ich ein Div beim Scrollen in Ionic?

Antwort

Verwandte Themen