Ionic—问题列表模块开发

其他 2018-12-28 23:55:18 阅读次数: 0
版权声明：作者已开启版权声明，如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/85137787

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

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;
    }
}

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

1.开发思路及细节

  • 开发页面详情内容，模拟后台返回数据

  • 需要返回直播内容信息及问题内容

  • 处理可空对象变量对象?.属性

  • 获取数据使用三元表达式变量?'...':'...'

2.实例代码

  • detail.html

    <ion-header>
  <ion-navbar>
    <ion-title>{{question?.ContentTitle}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-card>
  <ion-card-content>
    {{question?.Content}}
    <p>{{question?.watchNumber}}&nbsp;观看&nbsp;&nbsp;·&nbsp;&nbsp;{{question?.likeNumber}}&nbsp;爱心</p>
    <button ion-button small [disabled]="isMyQuestion">
      <ion-icon name="add"></ion-icon>回答
    </button>
    &nbsp;
    <button ion-button small color="secondary" (click)="saveFavourite()">
      <ion-icon name="add"></ion-icon>{{isFavourite?'取消关注':'关注'}}
    </button>
  </ion-card-content>
</ion-card>
<ion-card *ngFor="let a of answers">
  <ion-item>
    <ion-avatar item-start>
      <img src="{{a.headFace}}">
    </ion-avatar>
    <p>
      {{a.userNickname}}
    </p>
  </ion-item>
  <ion-card-content>
    <p>{{a.content}}</p>
    <p class="answer_date">{{a.createDateTime}}</p>
  </ion-card-content>
</ion-card>
</ion-content>

  • detail.ts

    import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, ToastController } from 'ionic-angular';
import { BaseUI } from '../../common/baseUI';
import { Storage } from '@ionic/storage';

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

  id:string;//当前问题id
  question:any;//当前问题内容
  answers:any[];//回答内容
  errorMessage:any;
  isFavourite:boolean;//是否点击关注
  isMyQuestion:boolean;//是否是当前用户的问题

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public loadingCtrl: LoadingController,
    public toastCtrl: ToastController,
    public storage: Storage
  ) {
    super();
  }

  ionViewDidLoad() {
    this.storage.get('token').then((val)=>{
      if(val !== null){
        this.id = this.navParams.get('id');
        let loading = this.showLoading(this.loadingCtrl,"Loading data...");
        //获取问题的详情
        setTimeout(()=>{
          this.question = {
            "ContentTitle":"你今天真好看-正在直播",
            "Content":"占位,用于播放直播内容...",
            "watchNumber":103,
            "likeNumber":26
          };
          this.answers = [
            {"headFace":"../../assets/imgs/avatar.jpg","userNickname":"Jerry","content":"特别好使，666","createDateTime":"2018.12.19"},
            {"headFace":"../../assets/imgs/logo.png","userNickname":"Tom","content":"特别好使，666","createDateTime":"2018.12.09"},
            {"headFace":"../../assets/imgs/avatar.jpg","userNickname":"Simon","content":"特别好使，666","createDateTime":"2018.12.11"},
            {"headFace":"../../assets/imgs/logo.png","userNickname":"Gavin","content":"特别好使，666","createDateTime":"2018.12.13"},
            {"headFace":"../../assets/imgs/avatar.jpg","userNickname":"Anothey","content":"特别好使，666","createDateTime":"2018.12.15"},
            {"headFace":"../../assets/imgs/logo.png","userNickname":"Meina","content":"特别好使，666","createDateTime":"2018.12.14"},
            {"headFace":"../../assets/imgs/avatar.jpg","userNickname":"Toby","content":"特别好使，666","createDateTime":"2018.12.12"},
          ];
          this.isFavourite = false;
          this.isMyQuestion = true;
          loading.dismiss();
        },200); 
      }
    });
  }

  //click favourite
  saveFavourite() {
    let loading = this.showLoading(this.loadingCtrl,'Loading...');
    setTimeout(()=>{
      this.showToast(this.toastCtrl,this.isFavourite?'取消关注成功':'关注成功');
      this.isFavourite = !this.isFavourite;
      loading.dismiss();
    },2000)
  }
}

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

1.开发思路

  • 使用ionic g page answer创建page页面
  • 编写回答页面内容（ts和html）
  • 使用技巧
    • 使用modal传递过来的参数时，使用navParams.get('参数名');
    • 使用modal.onDidDismiss(()=>{},1000)获取modal返回时触发的监听事件

2.实例代码

  • detail.ts添加代码

    //show answer page
  showAnswerPage() {
    let modal = this.modalCtrl.create(AnswerPage,{"id":this.id});
    //当modal关闭时的回调
    modal.onDidDismiss(()=>{
      let loading = this.showLoading(this.loadingCtrl,"Loading data...");
        //获取问题的详情
        setTimeout(()=>{
          this.question = {
            "ContentTitle":"你今天真好看-正在直播",
            "Content":"占位,用于播放直播内容...",
            "watchNumber":103,
            "likeNumber":26
          };
          this.answers = [
            {"headFace":"../../assets/imgs/logo.png","userNickname":"Jack","content":"赞的一匹","createDateTime":"2018.12.20"},
            {"headFace":"../../assets/imgs/avatar.jpg","userNickname":"Jerry","content":"特别好使，666","createDateTime":"2018.12.19"},
            {"headFace":"../../assets/imgs/logo.png","userNickname":"Tom","content":"特别好使，666","createDateTime":"2018.12.09"},
            {"headFace":"../../assets/imgs/avatar.jpg","userNickname":"Simon","content":"特别好使，666","createDateTime":"2018.12.11"},
            {"headFace":"../../assets/imgs/logo.png","userNickname":"Gavin","content":"特别好使，666","createDateTime":"2018.12.13"},
            {"headFace":"../../assets/imgs/avatar.jpg","userNickname":"Anothey","content":"特别好使，666","createDateTime":"2018.12.15"},
            {"headFace":"../../assets/imgs/logo.png","userNickname":"Meina","content":"特别好使，666","createDateTime":"2018.12.14"},
            {"headFace":"../../assets/imgs/avatar.jpg","userNickname":"Toby","content":"特别好使，666","createDateTime":"2018.12.12"},
          ];
          this.isFavourite = false;
          this.isMyQuestion = true;
          loading.dismiss();
        },200); 
    })
    modal.present();
  }

  • answer.html

    <ion-header>
  <ion-navbar>
    <ion-title>Answer</ion-title>
    <ion-buttons start>
      <button ion-button (click)="dismiss();">
        <span ion-text color="primary" showWhen="ios">取消</span>
        <ion-icon name="md-close" showWhen="android"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button (click)="submit()">
        <span ion-text color="primary" showWhen="ios">发布</span>
        <ion-icon name="md-add-circle" showWhen="android"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item>
      <ion-label stacked>请输入回答内容</ion-label>
      <ion-textarea type="text" rows="20" style="height:100px;" [(ngModel)]="content"></ion-textarea>
    </ion-item>
  </ion-list>
</ion-content>

  • answer.ts

    import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController, LoadingController, ToastController } from 'ionic-angular';
import { BaseUI } from '../../common/baseUI';
import {Storage} from '@ionic/storage';

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

  id:string;
  content:string;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public viewCtrl: ViewController,
    public storage: Storage,
    public loadingCtrl: LoadingController,
    public toastCtrl: ToastController
    ) {
    super();
    //modal接受传递的参数
    this.id = navParams.get('id');
  }

  //dismiss modal
  dismiss() {
    this.viewCtrl.dismiss();
  }

  //submit info
  submit() {
    this.storage.get('token').then((val)=>{
      if(val!==null){
        let loading = this.showLoading(this.loadingCtrl,'Loading...');
        setTimeout(()=>{
          this.showToast(this.toastCtrl,'Submit successful!');
          loading.dismiss();
          this.viewCtrl.dismiss();
        },1000)
      }
    })
  }
}

猜你喜欢

转载自blog.csdn.net/qq_34829447/article/details/85137787
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022