如何在 Ionic 中滚动时隐藏 div？答案

【问题标题】：How to hide a div while scrolling in Ionic?如何在 Ionic 中滚动时隐藏 div？
【发布时间】：2017-04-17 21:45:08
【问题描述】：

我正在使用 Ionic（版本 1）构建应用程序，并希望在用户滚动时从控制器中隐藏 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>

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

您的问题没有解释您要隐藏哪个<div> 以及您已经尝试使用的代码，但是您可以为ion-content 的on-scroll 指令分配一个函数并做任何您想做的事情做那个功能。像这样：

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

这应该可以解决您遇到的问题。

【讨论】：

谢谢，但在 getScrollPosition 函数中我使用的是 $ionicScrollDelegate.getScrollPosition().top 但它总是给出 0 如何解决它？
可能是 Ionic 抓取了错误的滚动视图，您可以通过分配 delegate-handle 并使用它来获取滚动位置来确保发生这种情况。我将在上面的答案中添加一个示例。