ionic3 教程（三）設置頁製做

時間  2019-11-08
標籤 ionic3 ionic 教程 設置 製做 简体版
原文   原文鏈接

連接：
ionic3教程（一）安裝和配置
ionic3教程（二）登陸頁製做
ionic3教程（三）設置頁製做
ionic3教程（四）安卓硬件返回鍵處理
ionic3 教程（五）基本的網絡請求css

如今大部分 App，都會有本身的設置頁（我的信息頁），裏面會包含我的資料、設置、退出登陸等功能。這一回咱們就在製做一個我的信息頁。html

1.刪除 ContactPage 和 AboutPage

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

2.添加設置頁面

  • 添加設置頁

    ionic g page Settinggithub

  • 在app.module.ts中import，並分別寫到declarations和entryComponents中。

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

    {網絡

    root: SettingPage,
tabTitle: '設置',
tabIcon: 'person'

    }app

Title 是標題，這裏的 tabIcon 用的是 ionic 提供的默認圖標，圖標大全請看這裏，點擊裏面的圖標，就會彈出對應的字符串。如圖：ionic

icons.png

這裏咱們必須去掉前面的 ion- 前綴才能夠使用。this

3.製做設置頁內容

打開 setting.html，輸入如下代碼spa

<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>
                    ![](./assets/icon/user.jpg)
                </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>
                    ![](./assets/icon/user.jpg)
                </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 的效果）：

設置頁.png

這一段我多展現了幾種效果，代碼自行理解加深如下印象。

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/do... （最新）
http://ionicons.com/ （已過期）

icon.png

使用時直接輸入左邊的 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 的效果）：

設置頁.png

這一段我多展現了幾種效果，代碼自行理解加深如下印象。

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

追加

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

this.navCtrl.push(TabsPage).then(() => {
  const startIndex = this.navCtrl.getActive().index - 1;
  this.navCtrl.remove(startIndex, 1);
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程