Ionic—我的模块开发

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

一.个人中心我的页面布局开发

1.开发设计

  • 布局个人页面的菜单
  • 使用color属性也可以给icon添加颜色,color中的值在theme中定义,可以直接给定颜色,如<ion-icon name="paper" item-start color="primary"></ion-icon>

2.实例代码

  • more.html

    <ion-header>
  <ion-navbar>
    <ion-title>更多</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div *ngIf="!isLogined">
    <ion-card>
      <ion-card-header text-center>
        Log in 'Free Skin' and experience more features...
      </ion-card-header>
      <ion-card-content text-center>
        <button ion-button outline (click)="presentLoginModal()"> Sign in / Sign up </button>
      </ion-card-content>
    </ion-card>
  </div>
  <div *ngIf="isLogined">
    <ion-list class="marginTop10px">
      <button ion-item (click)="editUserInfo()">
        <ion-avatar item-start>
          <img [src]="avatarUrl">
        </ion-avatar>
        <h2>
          {{userName}}
        </h2>
        <p>Click to edit your user info</p>
      </button>
    </ion-list>

    <ion-list class="marginTop10px">
      <ion-list-header>
        我的信息
      </ion-list-header>
      <button ion-item>
        <!-- 使用color属性也可以给icon添加颜色,color中的值在theme中定义,可以直接给定颜色 -->
        <ion-icon name="paper" item-start color="primary"></ion-icon>
        <ion-label>我的直播</ion-label>
      </button>
      <button ion-item>
        <ion-icon name="star" item-start color="orange"></ion-icon>
        <ion-label>我的关注</ion-label>
      </button>
      <button ion-item>
        <ion-icon name="disc" item-start color="secondary"></ion-icon>
        <ion-label>我的护肤</ion-label>
      </button>
    </ion-list>
  </div>
</ion-content>

二.公用模块的设计与布局开发

1.开发设计

  • 模块化设计的思想与布局实现
  • 创建questionList组件实现我的直播、我的关注和我的护肤访问的都是同一个组件ionic g component questionList

2.实例代码

  • question-list.html

    <ion-list>
  <ion-item>
    <!-- 标题 -->
    <h2></h2>
    <!-- 内容 -->
    <p></p>
  </ion-item>
</ion-list>

三.公用模块的逻辑开发

1.开发设计

  • 完成模块化设计的逻辑实现

  • 如何向组件传递参数？

    • 使用@Input

    • 参数传递外部传入时的键,并自行赋予变量名

      //dataType是外部传递进来的，dataSourceType是本地接收之后的参数命名
@Input('dataType') dataSourceType;

  • 组件这里没有ionic生命周期函数，但有angular生命周期,如:ngAfterContentInit(){}

  • Ionic组件分为官方定义好的组件和自己定义的组件

    • Ionic整个项目都是一个组件树(Component tree)

2.实例代码

  • question-list.html

    <ion-list>
  <ion-item *ngFor="let q of questionList" (click)="gotoDetails(q.IdentityId)">
    <!-- 标题 -->
    <h2>{{q.contentTitle}}</h2>
    <!-- 内容 -->
    <p>{{q.contentSummary}}</p>
  </ion-item>
</ion-list>

  • question-list.ts

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

@Component({
  selector: 'question-list',
  templateUrl: 'question-list.html'
})
export class QuestionListComponent extends BaseUI {

  //dataType是外部传递进来的，dataSourceType是本地接收之后的参数命名
  @Input('dataType') dataSourceType;

  questionList:any[];

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public viewCtrl: ViewController,
    public modalCtrl: ModalController,
    public loadCtrl: LoadingController,
    public toastCtrl: ToastController,
    public storage: Storage
  ) {
    super();
  }

  //组件这里没有ionic生命周期函数，但有angular生命周期
  ngAfterContentInit() {
    this.storage.get('token').then((val)=>{
      if(val !== null){
        let loading = this.showLoading(this.loadCtrl,'Loading...');
        setTimeout(()=>{
          this.questionList = [
            {"IdentityId":1,"contentTitle":"列表序号1","contentSummary":"列表摘要1"},
            {"IdentityId":2,"contentTitle":"列表序号2","contentSummary":"列表摘要2"},
            {"IdentityId":3,"contentTitle":"列表序号3","contentSummary":"列表摘要3"},
            {"IdentityId":4,"contentTitle":"列表序号4","contentSummary":"列表摘要4"},
            {"IdentityId":5,"contentTitle":"列表序号5","contentSummary":"列表摘要5"},
            {"IdentityId":6,"contentTitle":"列表序号6","contentSummary":"列表摘要6"},
            {"IdentityId":7,"contentTitle":"列表序号7","contentSummary":"列表摘要7"},
            {"IdentityId":8,"contentTitle":"列表序号8","contentSummary":"列表摘要8"},
            {"IdentityId":9,"contentTitle":"列表序号9","contentSummary":"列表摘要9"},
            {"IdentityId":10,"contentTitle":"列表序号10","contentSummary":"列表摘要10"}
          ];
          loading.dismissAll();
        },500);
      }
    })
  }

  gotoDetails(questionId) {
    this.navCtrl.push(DetailsPage,{id:questionId});
  }
}

四.快速绑定对应参数生成列表的方法

1.开发思路

  • 创建userdetail页面显示具体列表详情

2.实例代码

  • userdetail.ts

    import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-userdatalist',
  templateUrl: 'userdatalist.html',
})
export class UserdatalistPage {

  //数据类型
  dataType:string;
  //标题
  title:string;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams) {
      this.dataType = navParams.get('dataType');
      switch(this.dataType){
        case 'question':
          this.title = '我的直播';
          break;
        case 'answer':
          this.title = '我的护肤';
          break;
        case 'favourite':
          this.title = '我的关注';
          break; 
      }
  }
}

  • userdetail.html

    <ion-header>
  <ion-navbar>
    <ion-title>{{title}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <question-list [dataType]="dataType"></question-list>
</ion-content>

  • more.html

    <ion-header>

  <ion-navbar>
    <ion-title>更多</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
  <div *ngIf="!isLogined">
    <ion-card>
      <ion-card-header text-center>
        Log in 'Free Skin' and experience more features...
      </ion-card-header>
      <ion-card-content text-center>
        <button ion-button outline (click)="presentLoginModal()"> Sign in / Sign up </button>
      </ion-card-content>
    </ion-card>
  </div>
  <div *ngIf="isLogined">
    <ion-list class="marginTop10px">
      <button ion-item (click)="editUserInfo()">
        <ion-avatar item-start>
          <img [src]="avatarUrl">
        </ion-avatar>
        <h2>
          {{userName}}
        </h2>
        <p>Click to edit your user info</p>
      </button>
    </ion-list>

    <ion-list class="marginTop10px">
      <ion-list-header>
        我的信息
      </ion-list-header>
      <button ion-item (click)="gotoDataList('question')">
        <!-- 使用color属性也可以给icon添加颜色,color中的值在theme中定义,可以直接给定颜色 -->
        <ion-icon name="paper" item-start color="primary"></ion-icon>
        <ion-label>我的直播</ion-label>
      </button>
      <button ion-item (click)="gotoDataList('favourite')">
        <ion-icon name="star" item-start color="orange"></ion-icon>
        <ion-label>我的关注</ion-label>
      </button>
      <button ion-item (click)="gotoDataList('answer')">
        <ion-icon name="disc" item-start color="secondary"></ion-icon>
        <ion-label>我的护肤</ion-label>
      </button>
    </ion-list>
  </div>
</ion-content>

  • more.ts

    import { Component } from '@angular/core';
import { NavController, NavParams, ModalController, LoadingController, ToastController, UrlSerializer } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { Storage } from '@ionic/storage';
import { BaseUI } from '../../common/baseUI';
import { UserPage } from '../user/user';
import {UserdatalistPage} from '../userdatalist/userdatalist';
@Component({
  selector: 'page-more',
  templateUrl: 'more.html',
})
export class MorePage extends BaseUI{

  //判断是否登录
  isLogined:boolean = false;

  //avatar url
  avatarUrl:string = "../../assets/imgs/logo.png";
  //user name
  userName:string = "Jack_Wangzhe";

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

  presentLoginModal() {
    const modal = this.modalCtrl.create(LoginPage);
    modal.onDidDismiss(()=>{
      this.loadUserPage();
    })
    modal.present();
  }

  //ionic生命周期方法：当页面进入完成后调用
  ionViewDidEnter() {
    this.loadUserPage();
  }

  //加载用户信息
  loadUserPage() {
    this.storage.get('token').then((val)=>{
      if(val!=null){
        this.isLogined = true;
        let loading = super.showLoading(this.loadingCtrl,"Loading...");
        setTimeout(()=>{
          this.avatarUrl = "../../assets/imgs/avatar.jpg"+"?"+(new Date());
          this.userName = "Jack";
          loading.dismiss();
        },2000);
      }else{
        this.isLogined = false;
      }
    })
  }

  //跳转到用户详情页面
  editUserInfo() {
    this.navCtrl.push(UserPage);
  }

  //跳转到数据列表页面
  gotoDataList(type) {
    this.navCtrl.push(UserdatalistPage,{"dataType":type});
  }
}

猜你喜欢

转载自blog.csdn.net/qq_34829447/article/details/85219960
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 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