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. Vue Mixin 与微信小程序 Mixins 应用

    什么是Mixin(混入) Mixin是一种思想,用来实现代码高度可复用性,可以针对属性复制实现代码复用的想法进行一个扩展,就是混入(mixin).混入并不是复制一个完整的对象,而是从多个对象中复制出任 ...

  2. vscode local attach 和 remote debug

    VSCode是MS推出的一款免费的开源并跨平台的轻量级代码编辑器,内置Git和Debug等常用功能,强大的插件扩展功能以及简单的配置几乎可以打造成任意编程语言的IDE.本文简单聊一下其本地attach ...

  3. C# 构造tree菜单工具方法

    如何构造tree数据结构,做个笔记,方便查阅,本方法是直接返回json字符串: private string ToMenuJson(List<Model> data, string par ...

  4. jQuery(九)、ajax对象操作

    1 数组和对象操作 1.jQuery.extend([deep,] target, object1, [objectN]) 用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 如果不指定targe ...

  5. 解决Spring MVC前台传参中文乱码问题

    在web.xml文件中配置字符编码过滤器: <filter> <filter-name>CharacterEncoding</filter-name> <fi ...

  6. while死循环导致的内存溢出

    场景:新开发的功能内测,新调用了其它模块的接口,一如既往的点鼠标,计费,但是许久都没有响应页面遮罩一直锁着,最后抛出了以下异常 咋一看这个异常信息,不就是锁表了吗?把锁表进程Kill掉,再来一遍,结果 ...

  7. PHPCMS V9 添加二级导航

    今天看了看phpcms 写到二级导航时发现点问题,查询导航栏的信息时返回的$r[arrchildid]与自己想象的不符,文档上说是返回子栏目id但是却有些不同. 开始的思路: <ul class ...

  8. JavaScript实现获取两个排序数组的中位数算法示例

    本文实例讲述了JavaScript排序代码实现获取两个排序数组的中位数算法.分享给大家供大家参考,具体如下: 题目 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2 . 请找出这两个 ...

  9. CSS的使用方法

    参考资料:http://css.cuishifeng.cn/ 一.CSS的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用(与链接式 ...

  10. 驰骋开源的asp.net工作流程引擎java工作流 2015 正文 驰骋工作流引擎ccflow6的功能列表

    关键词: 驰骋工作流引擎   ccflow的功能列表   工作流功能列表  表单引擎功能列表 我们工作流引擎ccflow6重构之后对功能做了一些调整,要想快速了解ccbpm的功能,可以以下面列表为准 ...