ionic3 教程（三）设置页制做

时间 2019-11-17

标签 ionic3 ionic 教程设置制做繁體版

原文原文链接

连接：
ionic3 教程（一）安装和配置
 ionic3 教程（二）登陆页制做
 ionic3 教程（三）设置页制做
 ionic3 教程（四）安卓硬件返回键处理
 ionic3 教程（五）基本的网络请求css

内容已跟进到 ionic3.5.0 最新版本html

如今大部分 App，都会有本身的设置页（我的信息页），里面会包含我的资料、设置、退出登陆等功能。这一回咱们就在制做一个我的信息页。git

1.删除 ContactPage 和 AboutPage

首先删除文件，而后删除 app.module.ts 中的引用，最后删除 Tabs.ts 中的引用。若是删除后运行不了就再检查一下或者从新运行一下，你作项目的时候早晚会遇到须要删文件的状况。github

2.添加设置页面

添加设置页bash

ionic g page Setting网络
在app.module.ts中import，并分别写到declarations和entryComponents中。app

在 tabs.ts 中引入，并在 tabRoots 中插入这段代码ionic

{
  root: SettingPage,
  tabTitle: '设置',
  tabIcon: 'person'
}
复制代码

Title 是标题，这里的 tabIcon 用的是 ionic 提供的默认图标，图标大全请看 https://ionicframework.com/docs/ionicons/ （最新） http://ionicons.com/ （已过期）post

使用时直接输入左边的 Name 值便可。this

3.制做设置页内容

打开 setting.html，输入如下代码

<ion-header>
        <ion-navbar>
            <ion-title>
                更多
            </ion-title>
        </ion-navbar>
    </ion-header>

    <ion-content class="bg-color">
        <ion-list class="top-list">
            <button ion-item [navPush]="userInfoPage">
                <ion-avatar item-left>
                    [图片上传失败...(image-c93b50-1513351069560)]
                </ion-avatar>
                <h2>devilx</h2>
                <p>帐号：18600001111</p>
            </button>
        </ion-list>

        <ion-list>
            <ion-item>
                控件1
            </ion-item>
            <button ion-item>
                控件2
            </button>
            <button ion-item>
                <ion-avatar item-left>
                    [图片上传失败...(image-55ea8-1513351069560)]
                </ion-avatar>
                控件3
            </button>
        </ion-list>

        <ion-list>
            <button ion-item>
                版本号
                <span  item-end>V1.0</span>
            </button>
            <button ion-item>
                关于
            </button>
        </ion-list>

        <div style="text-align: center; margin-left: 30px; margin-right: 30px;margin-top: 30px;">
            <button ion-button block (click)="logOut()">
                退出登陆
            </button>
        </div>
    </ion-content>
复制代码

打开setting.scss，输入如下代码

page-setting {
  .toolbar-title-md{
    text-align: center;
  }

  .scroll-content{
    overflow: hidden;
  }

  .bg-color{
    background-color: #efeeee;
  }

  .top-list{
    margin-top: 15px;
  }
}
复制代码

运行效果如图所示（我这里使用了 http://localhost:8100/ionic-lab，因此展现的是 iOS 的效果）：

这一段我多展现了几种效果，代码自行理解加深如下印象。

4.制做退出登陆功能

首先咱们须要回到 login.ts，把跳转方式改一下，由于若是使用 push 的方法进行跳转，即便你隐藏了返回按钮，安卓手机也是可使用返回键跳回上一个页面的。因此咱们要使用另外一种跳转方式

进入 login.ts，引入 ModalController，删除无用的引用，以下

import { Component } from '@angular/core';
import { IonicPage, ModalController} from 'ionic-angular';
import { TabsPage } from "../tabs/tabs";

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public modalCtrl: ModalController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  logIn(username: HTMLInputElement, password: HTMLInputElement) {
    if (username.value.length == 0) {
      alert("请输入帐号");
    } else if (password.value.length == 0) {
      alert("请输入密码");
    } else {
      let userinfo: string = '用户名：' + username.value + '密码：' + password.value;
      alert(userinfo);
      let modal = this.modalCtrl.create(TabsPage);
      modal.present();
    }
  }

}
复制代码

而后到 Setting.ts 页面，改成如下代码

import { Component } from '@angular/core';
import { IonicPage, ModalController } from 'ionic-angular';
import { LoginPage } from "../login/login";

@IonicPage()
@Component({
  selector: 'page-setting',
  templateUrl: 'setting.html',
})
export class SettingPage {

  constructor(public modalCtrl: ModalController) {
  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad SettingPage');
  }

  logOut() {
    let modal = this.modalCtrl.create(LoginPage);
    modal.present();
  }

}
复制代码

OK，退出登陆功能制做完成，这一节到此结束。

Demo下载地址

连接：
ionic3 教程（一）安装和配置
 ionic3 教程（二）登陆页制做
 ionic3 教程（三）设置页制做
 ionic3 教程（四）安卓硬件返回键处理
 ionic3 教程（五）基本的网络请求

如今大部分 App，都会有本身的设置页（我的信息页），里面会包含我的资料、设置、退出登陆等功能。这一回咱们就在制做一个我的信息页。