Ionic—问题列表模块开发

一.问题列表页面布局开发

1.开发思路

• 在home页面完成列表页面的布局开发
• home页面显示开启直播间用户的头像、用户名、房间标题、房间内容及房间相关参数信息

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" (tap)="gotoQuestion()"></ion-icon>
  </ion-navbar>
</ion-header>

<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-card >
    <ion-item>
      <ion-avatar item-start>
        <img src="">
      </ion-avatar>
      <p>
        Sinar开启直播间
        <ion-icon class="more_button" name="more"></ion-icon>
      </p>
    </ion-item>
    <h2>直播间标题</h2>
    <ion-card-content>
      <p>直播间内容</p>
    </ion-card-content>
    <ion-row>
      <ion-col col-8 center text-left>
        <ion-note>
          100&nbsp;观看&nbsp;&nbsp;·&nbsp;&nbsp;20&nbsp;爱心&nbsp;&nbsp;·&nbsp;&nbsp;查看房间
        </ion-note>
      </ion-col>
      <ion-col col-4></ion-col>
    </ion-row>
  </ion-card>
</ion-content>

• home.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;
    }

    //card样式
    .card {
        margin: 0;
        margin-bottom: 10px;
        width: 100%;
        box-shadow: none;
    }

    //card中标题样式
    .card h2 {
        padding-left: 10px;
        font-weight: bold;
        font-size: 1.5rem;
    }

    //card中内容样式
    .card p {
        color: #464646;
        font-size: 1.2rem;
    }
    
    .card-content {
        padding-top: 6px;
        padding-left: 10px;
        padding-bottom: 2px;
    }

    .card .note {
        padding-left: 5px;
        font-size: 1.1rem;
    }

    .col {
        padding-top: 0;
        padding-bottom: 10px;
    }

    .item {
        padding-left: 10px;
    }

    .item p {
        color: #999999;
    }

    .item ion-avatar {
        margin: 0!important;
        margin-right: 5px!important;
        margin-bottom: 3px!important;
        min-height: 20px;
        min-width: 20px;
    }

    .item ion-avatar img {
        width: 20px;
        height: 20px;
    }
    
    .more_button {
        float: right;
        padding-top: 3px;
    }
}

二.问题列表页面的数据绑定逻辑开发

1.开发思路

• 进行页面逻辑的数据绑定
• 编写获取数据信息的函数，并在ionic的生命周期方法ionViewDidLoad()中调用
• 编写selectTab()用于直接跳转对话栏(同级Tab)

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" (tap)="gotoChat()"></ion-icon>
  </ion-navbar>
</ion-header>

<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
            <span style="float:right;color:#dddddd">|</span>
          </div>
        </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-card *ngFor="let f of feeds;">
    <ion-item>
      <ion-avatar item-start>
        <img src="{{f.headFace}}">
      </ion-avatar>
      <p>
        {{f.userNickName}}开启直播间
        <ion-icon class="more_button" name="more"></ion-icon>
      </p>
    </ion-item>
    <h2>{{f.contentTitle}}</h2>
    <ion-card-content>
      <p>{{f.contentSummary}}</p>
    </ion-card-content>
    <ion-row>
      <ion-col col-8 center text-left>
        <ion-note>
          {{f.watched}}&nbsp;观看&nbsp;&nbsp;·&nbsp;&nbsp;{{f.love}}&nbsp;爱心&nbsp;&nbsp;·&nbsp;&nbsp;查看房间
        </ion-note>
      </ion-col>
      <ion-col col-4></ion-col>
    </ion-row>
  </ion-card>
</ion-content>

• home.ts

import { Component } from '@angular/core';
import { NavController, ModalController, Tab, Tabs, LoadingController } from 'ionic-angular';
import { QuestionPage } from '../question/question';
import { BaseUI } from '../../common/baseUI';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage extends BaseUI{

  feeds: any[];
  errorMessage: string;

  constructor(
    public navCtrl: NavController,
    public modalCtrl: ModalController,
    public loadingCtrl: LoadingController
  ) {
    super();
  }

  ionViewDidLoad() {
    this.getFeeds();
  }

  //当tap事件(手指触碰)被触发的时候执行对应函数
  gotoQuestion() {
    let modal = this.modalCtrl.create(QuestionPage);
    modal.present();
  }

  //跳转到chat的tap
  gotoChat() {
    this.selectTab(2);
  }

  selectTab(index:number) {
    //通过当前tab获得其所有tab内容
    let t:Tabs = this.navCtrl.parent;
    //选定指定tab
    t.select(index);
  }

  //获得首页数据信息
  getFeeds() {
    let loading = super.showLoading(this.loadingCtrl,"Data Loading...");
    setTimeout(()=>{
      this.feeds = [
        {"id":1,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Sinar","contentTitle":"你今天很好看","contentSummary":"这里后期添加图片...","watched":100,"love":20},
        {"id":2,"headFace":"../../assets/imgs/logo.png","userNickName":"Jack","contentTitle":"快进来呀小伙伴","contentSummary":"这里后期添加图片...","watched":100,"love":20},
        {"id":3,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Crystal","contentTitle":"美妆真的美","contentSummary":"这里后期添加图片...","watched":100,"love":20},
        {"id":4,"headFace":"../../assets/imgs/logo.png","userNickName":"Ada","contentTitle":"Free Skin完美","contentSummary":"这里后期添加图片...","watched":100,"love":20},
        {"id":5,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Ida","contentTitle":"超赞美妆","contentSummary":"这里后期添加图片...","watched":100,"love":20},
        {"id":6,"headFace":"../../assets/imgs/logo.png","userNickName":"Adams","contentTitle":"妆出不一样的你","contentSummary":"这里后期添加图片...","watched":100,"love":20},
        {"id":7,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Lerry","contentTitle":"你今天妆了吗","contentSummary":"这里后期添加图片...","watched":100,"love":20}
      ];
      loading.dismiss();
    },2000);
  }
}

三.问题详情页面的布局开发

1.开发思路

• 创建问题详情页面ionic g page details
• 为之前的card添加点击跳转事件，使用this.navCtrl.push(页面)
• 编写detail页面展示内容详情及用户评论列表

2.实例代码

• details.html

<ion-header>
  <ion-navbar>
    <ion-title>Title Details</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-card>
  <ion-card-content>
    直播的详情
    <p>100&nbsp;观看&nbsp;&nbsp;·&nbsp;&nbsp;20&nbsp;爱心</p>
    <button ion-button small>
      <ion-icon name="add"></ion-icon>回答
    </button>
    &nbsp;
    <button ion-button small>
      <ion-icon name="add"></ion-icon>关注
    </button>
  </ion-card-content>
</ion-card>
<ion-card>
  <ion-item>
    <ion-avatar item-start>
      <img src="">
    </ion-avatar>
    <p>
      Rae
    </p>
  </ion-item>
  <ion-card-content>
    <p>用户回答内容</p>
    <p class="answer_date">2018.12.20</p>
  </ion-card-content>
</ion-card>
</ion-content>

• details.scss

page-details {
    .card {
        margin: 0;
        margin-bottom: 10px;
        width: 100%;
        box-shadow: none;
    }

    .card-content {
        font-size: 1.2rem;
    }

    .button-default {
        height: 1.8em;
        font-family: 1.3rem;
        float: right;
        display: block;
        margin-bottom: 10px;
        padding: 0 0.9em;
    }

    .scroll-content {
        padding: 0!important;
    }

    .card-p {
        margin-top: 10px;
    }

    .answer_date {
        float: right;
    }
}

四.问题详情页面的数据加载

暂未开发…

五.问题回答页面的布局开发

暂未开发…