ionic3(二)登录页制作
来源:互联网 发布:你快乐所以我快乐 知乎 编辑:程序博客网 时间:2024/06/14 19:08
做一个登录页面:
1.修改 Tabs,让目录结构清晰
打开 Tabs.html,修改为如下代码:
<ion-tabs> <ion-tab *ngFor="let tabRoot of tabRoots" [root]="tabRoot.root" tabTitle="{{tabRoot.tabTitle}}" tabIcon="{{tabRoot.tabIcon}}"></ion-tab></ion-tabs>
打开 Tabs.ts,修改为如下代码:
import { Component } from '@angular/core';import { AboutPage } from '../about/about';import { ContactPage } from '../contact/contact';import { HomePage } from '../home/home';@Component({ templateUrl: 'tabs.html'})export class TabsPage { tabRoots: Object[]; constructor() { this.tabRoots = [ { root: HomePage, tabTitle: 'Home', tabIcon: 'home' }, { root: ContactPage, tabTitle: 'Contact', tabIcon: 'notifications' }, { root: AboutPage, tabTitle: 'About', tabIcon: 'document' } ]; }}
这样你的目录结构就更加清晰了,方便以后为 Tabs 增加新的模块
2.新建登录页
// cd到项目目录,然后执行下面的代码$ ionic g page login
该命令会自动生成这几个文件,如图
3.打开app.module.ts
导入新生成的 Login
import { LoginPage } from '../pages/login/login';
并分别在 declarations 和 entryComponents 后面加上 LoginPage
我们所有新建的页面都需要在module进行声明才能使用
4.打开app.component.ts
import { LoginPage } from '../pages/login/login';
import 登录文件,并修改 rootPage 为 LoginPage
5.打开login.html文件,写入以下代码
<ion-header> <ion-navbar> <ion-title>登录</ion-title> </ion-navbar></ion-header><ion-content> <ion-item> <ion-label fixed>账号</ion-label> <ion-input type="text" placeholder="请输入账号" #username></ion-input> </ion-item> <ion-item> <ion-label fixed>密码</ion-label> <ion-input type="password" placeholder="请输入密码" #password></ion-input> </ion-item> <ion-item no-lines> <label item-right>记住密码</label> <ion-toggle></ion-toggle> </ion-item> <div style="text-align: center; margin-left: 30px; margin-right: 30px;"> <button ion-button block color="danger" (click)="logIn(username, password)"> 登录 </button> </div></ion-content>
效果如图所示,其中给 ion-item 加上 no-lines 可以去除底部的线条。(运行方式上一节已经讲过了)
界面的样式会自动适配系统,这里安卓的标题会自动左对齐,解决的方法是在scss文件加入
.toolbar-title-md { text-align: center;}
再举个例子,toggle 在安卓上会显示:
iOS会显示:
颜色什么的当然可以改,相关的可以查阅官方文档。
仔细体会每一行代码,可以试着删掉一些元素来看看会发生什么改变。有人私聊问过我按钮怎么居中啊,怎么改变按钮宽度,这里直接上代码。
6.登录的实现
修改button的代码为:
<button ion-button block color="danger" (click)="logIn()">
并在login.ts中写下以下代码:
logIn() { alert('登录');}
浏览器自动 build 之后,再次点击,就会弹出登录的提示框。这个logIn方法没有写权限修饰符,默认的话是 public 的。
这里有个问题,我们如何传值和验证。这里我给出一种简单的解决方案。这个 (click)=”logIn()” 明显后面的括号里是可以传值的。我们修改代码如下
login.html
分别修改两个 input
<ion-input type="text" placeholder="请输入账号" #username></ion-input><ion-input type="password" placeholder="请输入密码" #password></ion-input>
将值传入 button 的点击事件
<button ion-button block color="danger" (click)="logIn(username, password)">
login.ts
修改logIn方法
logIn(username: HTMLInputElement, password: HTMLInputElement) { let userinfo: string = '用户名:' + username.value + '密码:' + password.value; alert(userinfo);}
这回你点击时候就会输出用户名和密码了。
同理,我们可以加上验证
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); }}
最后导入头文件,并实现跳转
import { TabsPage } from "../tabs/tabs";
在登录成功后面加入以下代码:
this.navCtrl.push(TabsPage);
测试一下,输出账号密码,点击登录即可跳转到 Tabs 页面。
Demo地址
- ionic3(二)登录页制作
- ionic3 (三)设置页制作
- Ionic3学习笔记(二)主题化
- ionic3学习笔记(二)
- Swing学习----------QQ登录界面制作(二)
- Swing学习----------QQ登录界面制作(二)
- ionic3随笔(一)
- ionic3
- Tab页-------------ionic3+anjular4(一)
- ionic3学习2(API)
- ionic3学习历程(1)
- Ionic3学习笔记(一)
- Shell脚本学习(二)制作SSH登录远程服务器的Shell脚本
- ionic3(一)安装和配置
- ionic3小知识(持续更新...)
- ionic3自定义icon图标(简单版!!)
- Ionic3学习笔记(七)Storage
- div+css3纯手工制作登录页
- Nginx反向代理and负载均衡实例详解
- 玩转树莓派之ROS下更新boost库
- Citavi、Endnote、Mendeley 功能大比拼!到底哪一款才是众望所归的终极文献管理软件?
- mysql 指令
- JNI C创建Java字符串数组
- ionic3(二)登录页制作
- A Serial Killer
- Problems & Solutions -- 4
- QEMU和KVM 中断处理过程
- 实现c中memcpy函数
- Activit5.19 explorer部署流程中文乱码
- C语言数据类型-指针类型和空类型
- Android学习笔记——UI基础
- npm的package.json介绍