欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ionic2 + cordova 页面操作控制

程序员文章站 2022-03-03 14:58:30
...

3.1 样式调整

    contact.html 

<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <!--添加red样式-->
    <ion-list-header class="red">Follow us on Twitter</ion-list-header>
    <ion-item>
      <ion-icon name="ionic" item-left></ion-icon>
      @ionicframework
    </ion-item>
  </ion-list>
</ion-content>

       contact.scss 

$red-color : red;
page-contact {
  .red {
    color:  $red-color;
  }
}

 3.2 添加tab页


ionic2 + cordova 页面操作控制
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangular中文教程  3.2.1 paipai.html

<ion-header>
  <ion-navbar>
    <ion-title>
      我的拍拍
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header>用户信息</ion-list-header>
    <ion-item>
      <ion-icon name="ionic" item-left></ion-icon>
      我是小白
    </ion-item>
  </ion-list>
<!--按钮跳转-->
  <button ion-button full (click)="goToLogin()">登录</button>

</ion-content>

 

 3.2.2 paipai.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
//引进登录页
import {LoginPage} from '../login/login';

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

  constructor(public navCtrl: NavController) {

  }

  //跳转到登录页
  goToLogin () {
    //navCtrl 跳转
    this.navCtrl.push(LoginPage, {});
  }
}

 

3.2.3 在app.module.ts引入PaipaiPage(前文有)

 

3.2.4 tabs.ts 加入 PaipaiPage

 

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
//导入新增页面
import {PaipaiPage} from '../paipai/paipai';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;
  tab4Root = PaipaiPage;//绑定新页面
  constructor() {

  }
}
 

 

3.2.4 tabs.html 加入 tab4Root 

 

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  <!--加入新页面-->
  <ion-tab [root]="tab4Root" tabTitle="Paipai" tabIcon="contacts"></ion-tab>
</ion-tabs>
 

 

3.2.4 下面学习具体的应用,列表,http,表单等

  • ionic2 + cordova 页面操作控制
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangular中文教程 
  • 大小: 7.3 KB