html页面

<ion-content padding>

    <ion-segment [(ngModel)]="tabs">
<ion-segment-button value="gatewaySignal">网关接受信号</ion-segment-button>
<ion-segment-button value="taskType">任务类型</ion-segment-button>
<ion-segment-button value="testTask">测试任务</ion-segment-button>
<ion-segment-button value="lockRecord">门锁记录</ion-segment-button>
</ion-segment> <div [ngSwitch]="tabs">
<div *ngSwitchCase="'gatewaySignal'">
1
</div>
<div *ngSwitchCase="'taskType'">
2
</div>
<div *ngSwitchCase="'testTask'">
3
</div>
<div *ngSwitchCase="'lockRecord'">
4
</div>
</div> </ion-content>

ts文件里

public tabs = 'gatewaySignal';

 

ionic3创建选项卡的更多相关文章

  1. EasyUI创建选项卡并判断是否打开

    //创建选项卡:判断选项卡是否打开,如果以打开则定位到选项卡,否则创建 function addPanel(title) { var bol = $('#main_tabs').tabs('exist ...

  2. MFC 创建选项卡

    1.创建三个选项卡Dialog窗体,ID分别改为porpTest1.porpTest2.porpTest3 2.创建三个选项卡类,类名分别为CPropTest1.CPropTest2.CPropTes ...

  3. ExtJS创建选项卡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Ionic3 创建应用(Android)

    打开CMD 通过命令行进入项目目录 创建一个App项目 ionic start myApp blank 空白App ionic start myApp tabs 导航条 ionic start myA ...

  5. Ionic3实现选项卡切换可以重新加载echarts

    要求 选项卡每切换一次,就加载对应的一个echarts 图,要有一开始的动画效果效果如下: 注意点 1.echarts要想每次都能重新加载,需要移除"_echarts_instance_&q ...

  6. ionic3 创建项目至apk打包全过程教程

    主要流程: 安装node.js  -->  安装jdk  -->  安装AndroidSDK  -->  安装cordova  -->  安装ionic -->  创建项 ...

  7. Ionic3 创建应用后,目录结构

    ionic start myApp blank (空项目) hooks --编译cordova时自定义的脚本命令,方便整合到我们的编译系统和版本控制系统中 node_modules --node各类依 ...

  8. 转载《Android-TabHost 选项卡功能用法详解》

    一. TabHost介绍 TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计; 1. TabHost常用组件 TabWidget : 该组件就是TabHost标签页中上部 ...

  9. Android 自学之选项卡TabHost

    选项卡(TabHost)是一种非常实用的组件,TabHost可以很方便地在窗口上放置多个标签页,每个标签页相当于获得了一个与外部容器相同大小的组建摆放区域.通过这种方式,就可以在一个容器中放置更多组件 ...

随机推荐

  1. C# net request payload形式发送post请求

    因为开发微信群发电脑版需要模拟微信POST请求,微信发送消息使用request payload发送,实际发送的是json字符串.我们只需要生成的json字符串和请求的一致,header头完全模拟即可. ...

  2. WebServeice 动态代理类

    1, webservice是什么? 是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些应用程序 ...

  3. 折腾Java设计模式之建造者模式

    博文原址:折腾Java设计模式之建造者模式 建造者模式 Separate the construction of a complex object from its representation, a ...

  4. python自定义pi函数的代码

    下边内容是关于python自定义pi函数的内容. def pi(): # Compute digits of Pi. # Algorithm due to LGLT Meertens. k, a, b ...

  5. 【English】十二、英语句子种类,陈述句、疑问句、祈使句、感叹句

    一.英语句子按照用途可以分为4类 种类.用途.例句 陈述句 用于说明事实或说话人的看法(事实不就是别人发起并被同意的看法) My name is Jennt Green. I like him bec ...

  6. IOS跟ANDROID的区别

    大家总是会纠结哪个手机系统会更加适合自己,那就由小编我简要介绍一下IOS和安卓的区别吧! 运行机制:安卓是虚拟机运行机制,IOS是沙盒运行机制.这里再说明一下这两者的主要不同之处.安卓系统中应用程序的 ...

  7. 纯Java实现微信朋友圈分享图

    纯Java实现微信朋友圈分享图 1.实现分享图的效果 2.开发环境 2.1 JDK * oracle's jdk 1.8以上 2.2 字体 * 若选择了微软雅黑字体又是代码部署到Linux,则需要安装 ...

  8. 安装可以查看PMM 源码的Go环境

    1.基础介绍 最近在搭建PMM数据库监控系统,我们知道 Prometheus 是 PMM Server 的重要组件,*_exporter是PMM Client的主要组件. 归属组件 名称 作用 Ser ...

  9. github在README.md中插入图片

    例子 ![image](https://raw.githubusercontent.com/sunday123/Pendant/master/1.PNG)

  10. 如何连接别人电脑上的Oracle数据库?

    需要一些前提条件: 1.对方的主机能被连接(如在同一局域网内) 2.需要知道对方数据库IP.端口号.服务名 3.需要知道对方提供的管理数据库的用户名及密码 连接方法: 1.在本地的oracle安装目录 ...