`

ionic2 + cordova 页面操作控制

阅读更多

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页


 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,表单等

  • 大小: 7.3 KB
分享到:
评论

相关推荐

    ionic+Angular+Cordova初学者文档

    "2 ionic项目简介以及Angularjs 基础.pdf"引导读者进入ionic世界,讲解了ionic框架的构建原理和它与AngularJS的紧密关系。AngularJS是一个强大的前端MVC框架,它的数据绑定和依赖注入等特性使得开发变得更加高效。...

    Cordova 懒加载+网络图片下载缓存到本地

    Cordova+vue 项目实现图片懒加载并网络图片下载到本地实现本地加载,提高图片加载速度 如要插件 npm install --save js-md5 cordova-plugin-file cordova-plugin-file-transfer 在mian.js 中引入使用

    ionic3-cordova-barcode-qrcode-scanner-master_ionic3_phone_

    标题 "ionic3-cordova-barcode-qrcode-scanner-master_ionic3_phone_" 提示我们这个项目是基于 Ionic 3 框架,用于开发能够在移动设备上原生运行的应用程序,特别是与条形码和二维码扫描相关的功能。描述 "ionic 3 ...

    cordova屏蔽系统设置字体大小影响到app的字体大小

    因用户可能在移动设备的设置中改变字体大小,从而影响我们打包后app的显示界面,因字体大小问题,页面显示不是我们想要的,对比微信、qq等软件发现,大多数都是屏蔽了设置中改变字体大小对app的影响,我将我改后的...

    ionic+phonegap 案例源码

    2. **cordova.js** - 这是Cordova的核心库,提供了与设备硬件功能交互的API,如访问摄像头、GPS等。在PhoneGap项目中,这个文件用于连接应用和设备的底层操作系统。 3. **cordova_plugins.js** - 该文件记录了已...

    cordova+ionic.rar

    其中test压缩包是远程网页,可部署到web服务器下,hello是纯cordova项目,对立面InAppbrowser插件进行了改造,支持打开的远程网页调用本地插件,router2是ionic项目基于cordova同样进行了改造,router2由于太大没有...

    ngbarcode:ngbarcode,ionic+cordova+angularjs

    关于这方面的更多信息可以在 Ionic页面和库中找到。 问题 此 repo 上的问题已被禁用,如果您确实发现问题或有疑问,请考虑将其发布到。 否则,如果确实有错误,请按照我们的指南到主 Ionic 存储库。

    ionic6_angular10_elm:基于ionic6 + ng10构建一个具有30+页面的大型单页面应用

    ionic6_angular10_elm基于ionic6 + ng10构建一个具有30+页面的大型单页面应用(master必须使用ionic v6,已升级到v6正式版),将在zorro-antd-mobile组件上替代替换,查找的可以直接使用zorro分支(重构中,未完成)...

    Building Mobile Apps with Ionic 2 final2.0 (附项目源码)

    5. **路由与导航**:了解Ionic 2中的路由系统,学习如何设置页面间的导航,包括堆栈导航(用于前进/后退操作)和tabs导航(用于多标签页应用)。 6. **API集成**:在移动应用中,通常需要与服务器进行交互。Ionic 2...

    cordova_cn_city_select:中国城市区域选择,供ionic+angular+cordova+coffescript的应用框架上使用

    # enter your asset directory#bower install angular cordova-cn-city-select --savebower install angular git@github.com:jingyichushi/cordova_cn_city_select.git --save用法首先,您应该在页面中加载...

    ionic2 new demo

    2. **页面结构**:`Ionic2`应用由多个页面(Page)组成,每个页面都包含一个组件。在本示例中,你可以看到如何定义和使用自定义页面,例如,创建一个包含下拉框和输入框的新组件。 3. **UI组件**: - **下拉框...

    ionic+angular的PDF

    同时,Ionic 还利用 Cordova 或 Capacitor 进行设备访问,这意味着开发者可以用 Web 技术(HTML、CSS、JavaScript)编写应用,并将其编译成可以在 iOS、Android 或其他平台上运行的原生应用。 接下来是 Angular,这...

    使用Ionic2制作移动应用

    ### 使用Ionic2制作移动应用 #### 一、Ionic2基础知识概览 Ionic2是一个开源的框架,用于构建高性能的跨平台移动应用。它基于Angular2+ 和 Cordova/PhoneGap,利用HTML、CSS和JavaScript来开发原生感受的应用。本...

    ionic2入门学习PPT

    2. **Ionic/Cordova/cnpm安装** - **步骤1**: 安装Node.js,确保Node.js已安装。命令行输入`npm -v`检查版本。 - **步骤2**: 使用npm全局安装Ionic和Cordova。命令行输入`npm install -g cordova ionic cnpm`。 -...

    ionic2 demo

    6. **移动应用开发**:Ionic2 Demo项目展示了移动应用开发的基本流程,包括创建页面、处理用户交互、管理状态、实现导航等。开发者可以通过分析该项目学习如何在移动设备上实现常见功能。 7. **组件化**:Ionic2...

    完整的Ionic项目实例

    通过Cordova,开发者可以利用Ionic构建的前端应用,将其打包成可安装在不同操作系统上的应用程序。这意味着开发者可以用一种语言和一套工具编写代码,然后通过Cordova的插件系统访问各种设备功能。 **4. 学习资源与...

    用Ionic2编写移动应用程序

    - **导航(Navigation)**:Ionic2使用`nav-controller`来管理不同页面间的导航,支持页面的推送(push)和弹出(pop)操作。开发者可以定义导航堆栈,控制页面间的跳转和传递数据。 ### 用户输入: - **用户输入(User ...

    Cordova融云即时通讯ionic的完整项目-iOS

    **Cordova融云即时通讯ionic项目详解** Cordova是一款开源的移动应用开发框架,它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用程序。在这个项目中,Cordova与Ionic框架结合,提供了iOS平台上一个完整...

    Building-Mobile-Apps-with-Ionic-2

    - **推送和弹出页面**:Ionic 2提供了一个导航控制器来管理页面堆栈,允许开发者通过`push`和`pop`操作来控制页面的显示和隐藏。 - **基本导航**:使用`NavController`来控制页面的切换。 - **传递数据**:通过参数...

Global site tag (gtag.js) - Google Analytics