我正在使用 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>
您的问题没有解释<div>
您要隐藏哪些代码以及您已经尝试使用哪些代码,但是您能否将一个函数分配给 the 的on-scroll
指令ion-content
并在该函数中执行您想做的任何操作。所以像这样:
<ion-content on-scroll="scrollFunction()">
然后在您的控制器中添加一个名为的函数,scrollFunction
或者最好是更具描述性的函数。
$scope.getScrollPosition = function() {
// Here you can do whatever you want when someone is scrolling.
}
例如,您可以更新此功能的变量,并分配一个变量给ng-show
的的<div>
要显示或隐藏。
要回答关于getScrollPosition()
函数为何不断返回 0 的其他问题。这是一个已知问题,您可以在此处找到类似的报告。我不完全确定为什么会发生这种情况,但似乎 Ionic 正在抓取不同视图的滚动位置,使其保持为 0。您可以通过delegate-handler
为您的 分配 a来解决这个问题<ion-content>
,这基本上为您提供了一个唯一的标识符来使用。它看起来像这样:
<ion-content delegate-handle="scrollHandler" on-scroll="getScrollPosition()">
然后在您的控制器中,而不是执行以下操作:
$ionicScrollDelegate.getScrollPosition().top;
你需要这样做:
$ionicScrollDelegate.$getByHandle("scrollHandler").getScrollPosition().top;
这应该可以解决您遇到的问题。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句