【问题标题】:Ionic <ion-scroll>/<ion-content> scrolls further than screenlength离子 <ion-scroll>/<ion-content> 滚动比屏幕长度更远
【发布时间】:2016-01-12 14:09:51
【问题描述】:

这里是出了什么问题的演示:Video

窗格滚动得太远,它应该在最后一个按钮之后停止,但它似乎滚动到另一个页面高度。 我有多个离子含量,但我用 ng-class="ng-hide" 隐藏了我当时不使用的那些

<body>
<!-- Five number code -->
            <div class="animated fadeInRight" data-ng-class="numberCodeShow">
            <ion-content scroll="false" style="position:static;" scrollbar-y="false">
                <div id="splash">
                    <p class="logo">
                    <span class="leftUpColors" data-ng-style="{'background-color': style.style1}"></span><span class="leftDownColors" data-ng-style="{'background-color': style.style2}"></span><img  class="homeimage" data-ng-src="data:image/png;base64,{{style.logo}}"></p>
                </div> 
                <form data-ng-submit="showDashboard(code.fiveNumberCode)">
                    <ul class="fieldList padding">
                        <li><p style="text-align: center; padding-top: 10px;">Log in met de 5-cijferige code</p></li>
                        <li class="loginCodeWrapper">
                            <div class="input">
                                <input class="loginCode" data-ng-model="code.fiveNumberCode" type="tel" name="code" maxlength="5" required/>
                            </div>
                        </li>   
                    </ul>
                        <div class="padding">
                          <button data-ng-style="{'border-bottom-color': style.style1}" style="background-color: #FFFFFF"  type="submit" class="button button-block button-default signinbutton">Sign In<i data-ng-style="{'color': style.style1}"class="icon ion-arrow-right-c signinIcon"></i></button>
                        </div>
                </form>
                </ion-content>
            </div>
            <!--// Five number code //-->

            <!-- Dashboard -->
            <div class="animated fadeInLeft dashboard" data-ng-class="dashboardShow">
                <ion-content scroll='true' style="position:static;" scrollbar-y="false">    
                    <div id="splash">
                        <p class="logo">
                        <span class="leftUpColors" data-ng-style="{'background-color': style.style1}"></span><span class="leftDownColors" data-ng-style="{'background-color': style.style2}"></span><img class="homeimage" data-ng-src="data:image/png;base64,{{style.logo}}"></p>
                    </div>      
                    <div class="details">                                   
                        <p class="welcomeName" data-ng-style="{'border-bottom-color': style.style1}"><i data-ng-style="{'color': style.style1}" style="padding-right: 5px;" class="fa fa-user"></i>Welkom {{user.name}}</p>
                        <label data-ng-style="{'border-bottom-color': style.style2, 'color': 'black'}">Accordering</label>
                        <div>
                            <div class="padding">
                                <button data-ng-click="showOpenDocuments()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-folder-open buttonIconLeft"></i>Mijn openstaande taken</button>
                            </div>
                            <div class="padding">
                                <button data-ng-click="showAllDocuments()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-folder buttonIconLeft"></i>Alle Documenten</button>
                            </div>
                            <label data-ng-style="{'border-bottom-color': style.style2, 'color': 'black'}">Overige</label>
                                <div class="padding">
                                    <button data-ng-click="getOrganisations()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-contacts buttonIconLeft"></i>Contactpersonen</button>
                                </div>
                                <div class="padding">
                                    <button data-ng-click="showImageUpload()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-camera buttonIconLeft"></i>Foto Uploaden</button>
                                </div>
                                <div class="padding">
                                    <button data-ng-click="backToFolders()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-document-text buttonIconLeft"></i>Bestanden</button>
                                </div>
                                <div class="padding">   
                                    <button data-ng-click="showNotifications()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-notifications buttonIconLeft"></i>Notificaties</button>                         
                                </div>  
                        </div>                      
                    </div>
                </ion-content>  
            </div>

            <!--// Dashboard //-->

这是一段代码,因此您可以看到我是如何构建它的。代码中的变量是ng-showng-hide。在这种情况下numberCodeShow = 'ng-hide'dashboardShow = 'ng-show'

我尝试在 ion-scroll 上设置 max-height,但它不起作用。有谁知道为什么会出现这个问题?

【问题讨论】:

  • 你能在 plunker 或 codepen 中复制行为吗?这将使我们更容易找出确切的问题并提出解决方案。
  • 似乎我自己通过在其上放置 scroll = false 来修复它,并在下面单独使用 height:100vh;

标签: javascript css angularjs ionic-framework ionic


【解决方案1】:

似乎我自己修复了它,将 scroll = false 放在上面,并在下面用 height:100vh 单独制作;

回答 A. Vin 的问题:

这看起来像我所拥有的:

<ion-content scroll=true>
.....
.....
.....
</ion-content>

由于上层 div,这导致滚动很远。

这解决了问题:

<ion-content scroll=false>
<ion-scroll style="height:100vh">
...
...
...
</ion-scroll>
</ion-content>

我希望这也能解决您的问题! 如果您有任何其他问题,请随时提出:)

【讨论】:

  • Jelmer,您能否详细说明一下这个答案,我有同样的问题,很想知道您是如何解决的。谢谢。
猜你喜欢
  • 1970-01-01
  • 2017-02-12
  • 2015-12-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-26
  • 1970-01-01
相关资源
最近更新 更多