如何在 Ionic 中滚动时隐藏 div?

法塔赫·辛格·贾格迪奥

我正在使用 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Android中隐藏DIV上的灰色滚动条-仅在您无法滚动时显示

来自分类Dev

如何在Ionic框架中以编程方式滑动div?

来自分类Dev

如何在ionic 2中设置div的背景颜色?

来自分类Dev

在Ionic中,如何在向左滑动时禁用垂直滚动?

来自分类Dev

向下滚动然后向上滚动时如何隐藏div

来自分类Dev

悬停div时如何在div中向左滚动文本

来自分类Dev

如何隐藏溢出:在居中的div中滚动滚动条

来自分类Dev

在Bootstrap中向下滚动时如何在顶部附加div

来自分类Dev

在Bootstrap中向下滚动时如何在顶部附加div

来自分类Dev

如何在不隐藏正文滚动条的情况下在固定 div 上滚动时禁用正文滚动?

来自分类Dev

通过CSS滚动到底部时如何隐藏DIV?

来自分类Dev

窗口滚动到顶部时如何隐藏div?

来自分类Dev

如何在悬停时隐藏div?

来自分类Dev

如何在CSS中隐藏溢出的div的滚动条而不使用overflow:hidden?

来自分类Dev

如何在CSS中隐藏溢出的div的滚动条而不使用overflow:hidden?

来自分类Dev

如何在具有溢出滚动的div中向下滚动时播放视频

来自分类Dev

当div在@media屏幕中滚动时,如何在@media打印中显示div的内容

来自分类Dev

如何在 Angularjs 中左右滚动 div

来自分类Dev

如何在div中隐藏单个按钮

来自分类Dev

如何在div中隐藏类

来自分类Dev

如何在javascript中隐藏div?

来自分类Dev

如何在DIV中隐藏特定的A元素

来自分类Dev

如何在菜单中隐藏div折叠

来自分类Dev

如何在分页中隐藏DIV

来自分类Dev

AngularJS-如何在div外部单击时隐藏div

来自分类Dev

如何在鼠标上下滚动时使div水平滚动

来自分类Dev

如何在Ionic Framework中隐藏选项卡

来自分类Dev

如何在 Ionic2 中隐藏导航栏

来自分类Dev

如何在 Angular 中单击按钮时将嵌套滚动条向下滚动到嵌套滚动 div 的底部

Related 相关文章

  1. 1

    如何在Android中隐藏DIV上的灰色滚动条-仅在您无法滚动时显示

  2. 2

    如何在Ionic框架中以编程方式滑动div?

  3. 3

    如何在ionic 2中设置div的背景颜色?

  4. 4

    在Ionic中,如何在向左滑动时禁用垂直滚动?

  5. 5

    向下滚动然后向上滚动时如何隐藏div

  6. 6

    悬停div时如何在div中向左滚动文本

  7. 7

    如何隐藏溢出:在居中的div中滚动滚动条

  8. 8

    在Bootstrap中向下滚动时如何在顶部附加div

  9. 9

    在Bootstrap中向下滚动时如何在顶部附加div

  10. 10

    如何在不隐藏正文滚动条的情况下在固定 div 上滚动时禁用正文滚动?

  11. 11

    通过CSS滚动到底部时如何隐藏DIV?

  12. 12

    窗口滚动到顶部时如何隐藏div?

  13. 13

    如何在悬停时隐藏div?

  14. 14

    如何在CSS中隐藏溢出的div的滚动条而不使用overflow:hidden?

  15. 15

    如何在CSS中隐藏溢出的div的滚动条而不使用overflow:hidden?

  16. 16

    如何在具有溢出滚动的div中向下滚动时播放视频

  17. 17

    当div在@media屏幕中滚动时,如何在@media打印中显示div的内容

  18. 18

    如何在 Angularjs 中左右滚动 div

  19. 19

    如何在div中隐藏单个按钮

  20. 20

    如何在div中隐藏类

  21. 21

    如何在javascript中隐藏div?

  22. 22

    如何在DIV中隐藏特定的A元素

  23. 23

    如何在菜单中隐藏div折叠

  24. 24

    如何在分页中隐藏DIV

  25. 25

    AngularJS-如何在div外部单击时隐藏div

  26. 26

    如何在鼠标上下滚动时使div水平滚动

  27. 27

    如何在Ionic Framework中隐藏选项卡

  28. 28

    如何在 Ionic2 中隐藏导航栏

  29. 29

    如何在 Angular 中单击按钮时将嵌套滚动条向下滚动到嵌套滚动 div 的底部

热门标签

归档