如何在真实设备中的离子应用程序中滚动页面

时间:2017-05-22 08:27:28

标签: angularjs ionic-framework

您好我是离子应用程序的新手,我使用以下内容创建了第一页: - >

<ion-modal-view>
<ion-view id ="login" hide-nav-bar="true">
    <ion-content  scroll="false">
     <div id="login_image" >
            <div class="header padding text-center logodata">
                <img src="img/front-logo.png" alt="Your logo here"  width="60%" height="auto" class="logoImage"/>
            </div>

            <div class="header padding text-center panda">
                <img src="img/bear.png" alt="Your logo here" width="47%" height="auto"/>
            </div>

            <h1 class="getstarted" style="text-align:center">Get Started !</h1>
        </div>
          <form ng-submit="doLogin()" name="loginForm">
            <div class="row responsive-md">
                <div class="col col-50 col-offset-25">
                    <div class="list">
                        <label class="item item-input">
                      <i class="fa fa-user fa-6" aria-hidden="true"></i>
                       &nbsp; &nbsp;<input type="email" ng-model="loginData.username"  placeholder="" required>

                        </label>
                        <label class="item item-input">
                       <i class="fa fa-lock fa-6" aria-hidden="true"></i>
                         &nbsp; &nbsp;<input type="password" placeholder="" ng-model="loginData.password" required> 
                        </label>

                      <button class="button button-block button-positive sign_in" type="submit" ng-disabled="loginForm.$invalid">
                        SIGN  IN
                    </button>

                    <div class="signup"><center class="insignup"><span class="donaccount">Don't have an account ?</span>  <a href ng-click= "dashBoard()"  class="achorsignup"> SIGN UP</a></center><div>
                    </div>
                </div>
            </div>
        </form>
    </ion-content>
</ion-view>

</ion-modal-view>

然后我看到虚拟设备中的设计意味着在我的笔记本电脑中通过滚动来正确显示

但是当我在Android手机中运行它看起来像没有滚动选项显示如何在Android手机中看到完整的主页

2 个答案:

答案 0 :(得分:1)

ion-Scroll可以在您可能不需要整页滚动条的地方使用,但可以使用高度自定义的滚动条,例如图像显示或注释滚动条。

<ion-scroll scrollX="true">
</ion-scroll>

<ion-scroll scrollY="true">
</ion-scroll>

<ion-scroll scrollX="true" scrollY="true">
</ion-scroll>

更多信息请参阅this

答案 1 :(得分:0)

如果要使页面滚动,则必须将scroll属性的值设置为true。

<ion-content  scroll="true">

希望这有帮助!