一.搜索部分页面开发
1.开发设计
- 编写搜索栏
- 编写搜索按钮
2.开发代码
-
home.html
<ion-header> <ion-navbar> <ion-searchbar placeholder="Search:How to dressing?"></ion-searchbar> <ion-icon name="text" class="top_header_message_icon"></ion-icon> </ion-navbar> </ion-header>
-
home.scss
page-home { //searchbar是组件自动给定的class .searchbar { float: left; width:90%; } .searchbar-input { } .top_header_message_icon { float: left; font-size: 2em; min-height: 44px; color: #848994; padding: 9px 5px 9px 5px; text-align: center; } }
二.三栏功能按钮布局及事件加载开发
1.开发设计
- 使用ion-grid定义水平栏
- 使用col-x定义flex响应式比例
2.实例代码
-
home.html
<ion-content> <div class="floatMenu"> <ion-grid> <ion-row> <ion-col col-4 text-center> <div (tap)="gotoQuestion()"> <ion-icon name="create"></ion-icon> Quiz </div> </ion-col> <ion-col col-4 text-center> <div><span style="float:left;color:#dddddd">|</span> <ion-icon name="albums"></ion-icon> Answer </div><span style="float:right;color:#dddddd">|</span> </ion-col> <ion-col col-4 text-center> <div (tap)="gotoQuestion()"> <ion-icon name="share-alt"></ion-icon> Sharing </div> </ion-col> </ion-row> </ion-grid> </div> </ion-content>
-
hme.scss
page-home { .searchbar { float: left; width:90%; } .searchbar-input { } .top_header_message_icon { float: left; font-size: 2em; min-height: 44px; color: #848994; padding: 9px 5px 9px 5px; text-align: center; } .floatMenu { width:100%; height: 36px; background-color: #FFFFFF; margin-bottom: 5px; color: #999999; font-weight: bold; } }
三.提问页面布局开发
1.开发设计
- 创建question组件
ionic g page question
- 搭建question页面内容
2.实例代码
-
question.html
<ion-header> <ion-navbar> <ion-title>Question</ion-title> <ion-buttons start> <button ion-button (click)="dismiss()"> <span ion-text color="primary" showWhen="ios">Cancel</span> <ion-icon name="md-close" showWhen="android">Cancel</ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header> <ion-content> <ion-list> <ion-item> <ion-label stacked>问题标题</ion-label> <ion-input type="text" [(ngModel)]="title"></ion-input> </ion-item> <ion-item> <ion-label stacked>问题内容</ion-label> <ion-textarea type="text" rows="5" [(ngModel)]="content"></ion-textarea> </ion-item> </ion-list> <div padding> <button ion-button color="primary" block (tap)="submitQuestion()"> 提 问 </button> </div> </ion-content>
-
question.ts
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, ViewController, LoadingController, ToastController } from 'ionic-angular'; import {Storage} from '@ionic/storage'; import { BaseUI } from '../../common/baseUI'; @Component({ selector: 'page-question', templateUrl: 'question.html', }) export class QuestionPage extends BaseUI{ title:string; content:string; constructor( public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, public storage: Storage, public loadingCtrl: LoadingController, public toastCtrl: ToastController) { super(); } dismiss() { this.viewCtrl.dismiss(); } //submit question submitQuestion() { //check user is sign in or not this.storage.get('token').then((val)=>{ if(val !== null){ //start loading var loading = super.showLoading(this.loadingCtrl,"Sending..."); setTimeout(()=>{ loading.dismiss(); this.showToast(this.toastCtrl,"Sending successful!"); this.viewCtrl.dismiss(); },3000); }else{ this.showToast(this.toastCtrl,"Please send question after sign in!"); } }) } }