Angularjs 在Ionic中滚动时如何隐藏div？_Angularjs_Ionic Framework

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

angularjs ionic-framework

Angularjs 在Ionic中滚动时如何隐藏div？,angularjs,ionic-framework,Angularjs,Ionic Framework,我正在使用Ionic（版本1）构建一个应用程序，希望在用户滚动时从控制器隐藏一个div。我被卡住了，不知道从哪里开始这是我的代码： <body ng-app="starter" style="padding-top:150px;"> <div ng-controller="AppCtrl" id="header" > <div class="bar-aaa"> <div class="myLog

我正在使用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>


处理。。。

您的问题没有解释您试图隐藏的

以及您已经尝试使用的代码，但是您是否可以为

离子内容

的

on scroll

指令分配一个函数，并在该函数中执行您想执行的任何操作。所以像这样：

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

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

例如，您可以更新此函数中的变量，并将该变量分配给要显示或隐藏的

的

ng show

回答另一个关于

getScrollPosition（）

函数为什么一直返回0的问题。这是一个已知的问题，您可以找到类似的报告。我不完全确定为什么会发生这种情况，但似乎爱奥尼亚抓住了另一个视图的滚动位置，使其保持0。您可以通过为您的

分配

委托处理程序来解决此问题，这基本上为您提供了一个唯一的标识符。它看起来像这样：
<ion-content on-scroll="scrollFunction()">

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

您需要这样做：
$ionicScrollDelegate.$getByHandle("scrollHandler").getScrollPosition().top;

这应该可以解决您遇到的问题。
谢谢，但在getScrollPosition函数中，我使用了$ionicScrollDelegate.getScrollPosition（）.top，但它总是告诉0如何解决它？可能是Ionic获取了错误的滚动视图，您可以通过指定一个委托句柄
并使用该句柄获取滚动位置来确保这一点。我将在上面的答案中添加一个示例。