如何在離子滾動時隱藏div？

我正在使用Ionic（版本1）構建應用程序，並希望在用戶滾動時隱藏控制器的div。我卡住了，不知道從哪裏開始。如何在離子滾動時隱藏div？

這是我的代碼：

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

來源

2017-04-15 Fateh singh Jagdeo

你的問題沒有解釋其<div>你想隱藏什麼代碼，你已經嘗試已經使用，但是你能指定功能的on-scroll指令的ion-content並做任何你想做的功能。所以像這樣：

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

然後在你的控制器增加一個名爲scrollFunction或最好更具描述性的功能。

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

例如，您可以更新此功能的變量，並指派該變量要顯示或隱藏<div>的ng-show。

要回答你關於爲什麼getScrollPosition()功能保持返回0。這是一個衆所周知的問題，你可以找到類似的報道here等問題。我不完全確定爲什麼會發生這種情況，但看起來Ionic似乎正在抓住不同視圖的滾動位置，導致它保持爲0.您可以通過將delegate-handler分配給您的<ion-content>來解決此問題，它基本上爲您提供唯一標識符以便工作用。這將是這個樣子：

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

然後在你的控制器，而不是做了以下內容：

$ionicScrollDelegate.getScrollPosition().top;

你需要這樣做：

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

這應該解決您遇到的問題。

來源

2017-04-15 21:02:41 Dexter

謝謝，但在getScrollPosition函數中，我使用$ ionicScrollDelegate.getScrollPosition（）。top但它總是給出0如何解決它？ –

可能是Ionic抓住了錯誤的滾動視圖，您可以通過分配一個'委託句柄'並使用它來獲取滾動位置來確保發生這種情況。我將在上面的答案中添加一個示例。 – Dexter

如何在離子滾動時隱藏div？

回答

相關問題