Ionic学习日记2：制作登陆页面遇到的各种小问题

2019年5月26日 143次阅读 来源: SWKende

实现同一行的两组文字位居两侧

《Ionic学习日记2：制作登陆页面遇到的各种小问题》 效果图.png

1、第一种方法（这个方法不是特别好，会出现稍微的不对称问题）

<ion-grid>
      <ion-row>
        <ion-col col-6 push-3>
          <div></div>
        </ion-col>
        <ion-col col-3 push-3 >
          <button ion-button clear small>手机注册</button>
        </ion-col>
        <ion-col col-3 pull-9>
          <button ion-button clear small>忘记密码</button>
        </ion-col>
      </ion-row>
</ion-grid>

2、第二种方法

  <ion-item no-lines>
    <div float-left>
      <button ion-button clear small>手机注册</button>
    </div>
    <div float-right>
      <button ion-button clear small >忘记密码</button>
    </div>
  </ion-item>

实现顶端的导航栏文字居中

《Ionic学习日记2：制作登陆页面遇到的各种小问题》 效果图.png

在<ion-title>中添加 mode=”ios”即可

  <ion-title mode="ios">
     <ion-label color="light">ACTIVITY</ion-label>
  </ion-title>

实现页面的跳转功能

首先进入项目里

cd myApp

在命令提示符当中输入

ionic g page RegPage

等待片刻新的页面就建好了，在home.html（第一个页面）中添加

<button ion-button (click)="testNewPage()" large>
   跳转
</button>

在home.ts中添加

 testNewPage(){
     this.navCtrl.push(RegPage)
}

注意导入RegPage的包

import { RegPage } from '../reg/reg';

然后在src/app/app.module.ts这个文件中，分别在declarations和entryComponents中添加RegPage，同样不要忘记导入包

添加前

declarations: [
    MyApp,
    HomePage
]

entryComponents: [
    MyApp,
    HomePage
 ]

添加后

declarations: [
    MyApp,
    HomePage,
    RegPage
]

entryComponents: [
    MyApp,
    HomePage,
    RegPage
 ]

然后运行项目查看即可

打开ionic的app白屏或者黑屏情况

app再打开的时候一定会出现加载时间，目前遇到的情况，最快都要3秒的加载时间才能进去应用，所以最重要的是将app等待的时间改成用户能接受的界面，我这边添加了这一段代码到config.xml当中，这样的话直到app加载完之前都是那个ionic圈圈在转，转完就可以进去app了

<preference name="AutoHideSplashScreen" value="false" />

打开ionic的时候出现报错什么什么xml

貌似是ionic组件未加载完就进入app所出现的错误，所以加入这一段代码，让他加载时间多一点

<preference name="loadUrlTimeoutValue" value="700000" />
    原文作者：SWKende
    原文地址: https://www.jianshu.com/p/434a97a3a76e
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞