久久国产成人午夜av影院,影音先锋2020资源,永久av免费在线观看

ionic3學習之登錄頁

2018-5-4 seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

準備工作

部分源碼說明：

constructor(public modalCtrl: ModalController) {
}


    
        1
    

    
        2

我們使用的是：ModalController 不是 NavController。

這兩者的區別為：
NavController 和 ModalController 都是打開新頁面，但是NavController 是直接將頁面放入到原有的頁面堆棧中的，而ModalController 是創建一個新的頁面堆棧（root nav stack），然后再放進去。

最直觀的界面效果區別：

使用Tabs 菜單，使用NavController 方法跳轉的頁面，并不會移除Tabs
菜單；但是使用ModalController 方法就會從底部彈出新的頁面，并且沒有了Tabs 菜單。
使用NavController 方法，新頁面默認有返回按鈕，使用 ModalController
方法新頁面默認是沒有返回按鈕的。

文檔連接：
NavController ：https://ionicframework.com/docs/api/navigation/NavController/
ModalController：https://ionicframework.com/docs/api/components/modal/ModalController/

// cd到項目目錄，然后執行下面的代碼 ionic g page login --no-module


    
        1
    

    
        2

命令的說明：

ionic g page login 生成的 page 上面帶有 module 文件
ionic g page login –no-module 生成的 page 上面不帶有 module 文件

執行完之后生成的文件，圖示：
login

添加到根模塊

進入 src/app 下，修改 app.module.ts

// 導入 loginPage import {LoginPage} from "../pages/login/login"; // 在以下節點上面添加 LoginPage declarations:[
    LoginPage
],
entryComponents:[
    LoginPage
]


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

修改程序的首頁

我們程序進入的第一個界面，一般都是登錄界面，然后通過跳轉才到首頁。所以，我們需要修改下程序的邏輯。
進入 src/app/ 下，修改 app.component.ts

// 導入 loginPage import {LoginPage} from "../pages/login/login"; // 將源碼部分的 rootPage 指向到 LoginPage // rootPage:any = TabsPage; rootPage:any = LoginPage; // 這個地方就加載程序啟動的頁面


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

修改登錄界面

修改login.html

打開login.html文件，寫入以下代碼

<ion-header> <ion-navbar> <ion-title text-center>登錄</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list inset> <ion-item> <ion-input type="text" value="admin" placeholder="用戶名" #username></ion-input> <ion-icon ios="ios-person" md="md-person" item-end [ngStyle]="iconStyle"></ion-icon> </ion-item> <ion-item> <ion-input [type]="isShow ? 'text':'password'" value="88888" placeholder="密碼" #password></ion-input> <ion-icon ios="ios-key" md="md-key" item-end [ngStyle]="iconStyle"></ion-icon> </ion-item> <ion-item no-lines> <ion-label> <!-- 控制字體圖標的顯示是由 ios 以及 md 兩個屬性控制的  --> <ion-icon [ios]="isShow ? 'ios-eye' : 'ios-eye-off'" [md]="isShow ? 'md-eye' : 'md-eye-off'"></ion-icon> </ion-label> <ion-toggle checked="false" [(ngModel)]="isShow"></ion-toggle> </ion-item> <ion-item no-lines> <label item-left>記住密碼</label> <ion-toggle checked="false" [(ngModel)]="isRemember"></ion-toggle> </ion-item> </ion-list> <div padding> <button ion-button block color="primary" (click)="_login(username, password)">登錄</button> </div> </ion-content> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39

圖示：
這里寫圖片描述

部分樣式說明：

// text-center 讓文字居中 <ion-title text-center>登錄</ion-title> // no-lines 去除底部的線條 <ion-item no-lines></ion-item> // item-left 讓文字居左 <label item-left>記住密碼</label>


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

修改login.ts

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

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage { public isRemember: boolean = false; public isShow: boolean = false;

  iconStyle: object = {'color':'#488aff','font-size':'1.4em'};

  constructor(public modalCtrl: ModalController, public toastCtrl: ToastController, public storage: Storage) {
  }

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

  _login(username: HTMLInputElement, password: HTMLInputElement){ if (username.value.length === 0){ this.showToast("bottom", "請輸入"); return false;
    } if (password.value.length === 0){ this.showToast("bottom", "請輸入密碼"); return false;
    } let data = {username: username.value, password: password.value, isRemember: this.isRemember}; // 儲存用戶信息 this.storage.remove("USER_INFO"); this.storage.set("USER_INFO", JSON.stringify(data)); // 界面跳轉 let modal = this.modalCtrl.create(TabsPage, data);
    modal.present();
  }

  showToast(position: string, message: string) { let toast = this.toastCtrl.create({
      message: message,
      duration: 2000,
      position: position
    });

    toast.present(toast);
  }
}


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41
    

    
        42
    

    
        43
    

    
        44
    

    
        45
    

    
        46
    

    
        47
    

    
        48
    

    
        49
    

    
        50
    

    
        51
    

    
        52
    

    
        53
    

    
        54
    

    
        55
    

    
        56
    

    
        57
    

    
        58

接下來的一篇介紹下：怎么實現記住密碼之后直接進入到首頁。

藍藍設計( www.newchinaweekly.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

« UI設計、UE設計、交互設計分別是什么？ HTML條件注釋用法詮釋 »

国产黄色免费网站_久久天天做天天爱综合色_精品国产一区久久久_成人黄色激情网站_久久成人在线视频_美女一区二区在线观看_亚洲精品免费一区亚洲精品免费精品一区 _91精品国产综合久久精品麻豆

ionic3學習之登錄頁

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

準備工作

部分源碼說明：

添加到根模塊

修改程序的首頁

修改登錄界面

修改login.html

修改login.ts

分類

日歷

鏈接

個人資料

存檔

国产黄色免费网站_久久天天做天天爱综合色_精品国产一区久久久_成人黄色激情网站_久久成人在线视频_美女一区二区在线观看_亚洲精品免费一区亚洲精品免费精品一区 _91精品国产综合久久精品麻豆

ionic3學習之登錄頁

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

準備工作

部分源碼說明：

新建 login 頁面

添加到根模塊

修改程序的首頁

修改登錄界面

修改login.html

修改login.ts

分類

日歷

鏈接

個人資料

存檔

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里