Ionic—首页模块开发

版权声明：作者已开启版权声明，如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/85019284

一.搜索部分页面开发

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!");
        }
      })
    }
  }