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，都會有本身的設置頁（我的信息頁），裏面會包含我的資料、設置、退出登陸等功能。這一回咱們就在製做一個我的信息頁。

1.刪除 ContactPage 和 AboutPage

首先刪除文件，而後刪除 app.module.ts 中的引用，最後刪除 Tabs.ts 中的引用。若是刪除後運行不了就再檢查一下或者從新運行一下，你作項目的時候早晚會遇到須要刪文件的狀況。

2.添加設置頁面

添加設置頁

ionic g page Setting
在app.module.ts中import，並分別寫到declarations和entryComponents中。

在 tabs.ts 中引入，並在 tabRoots 中插入這段代碼

{
  root: SettingPage,
  tabTitle: '設置',
  tabIcon: 'person'
}
複製代碼

Title 是標題，這裏的 tabIcon 用的是 ionic 提供的默認圖標，圖標大全請看 https://ionicframework.com/docs/ionicons/ （最新） http://ionicons.com/ （已過期）

使用時直接輸入左邊的 Name 值便可。

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，引入 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下載地址

追加

最近有朋友提問說，跳轉到 tabs 頁再回登陸頁會無限進入。這裏提供一個解決方案。push 後再刪除以前頁面便可。

this.navCtrl.push(TabsPage).then(() => {
  const startIndex = this.navCtrl.getActive().index - 1;
  this.navCtrl.remove(startIndex, 1);
});複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。