ionic的ion-tabs和ion-side-menus
来源:互联网 发布:linux修改ftp用户密码 编辑:程序博客网 时间:2024/05/17 07:47
最近在使用ionic做一个简单的app时,同时使用了<ion-tabs></ion-tabs>标签和<ion-side-menus></ion-side-menus>,效果就是4个标签页,其中第二个标签页有一个侧边栏可以拉,效果图如下
点击按钮后可以调出侧边栏,点击侧边栏的选项可以调出新的视图,代码大概如下
<ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="首页" icon="ion-home" href="#/tab/home"> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> <ion-tab title="新闻" icon="ion-ios-information" href="#/tab/about"> <ion-nav-view name="about-tab"></ion-nav-view> </ion-tab> <ion-tab title="联系人" icon="ion-ios-world" ui-sref="tabs.contact"> <ion-nav-view name="contact-tab"></ion-nav-view> </ion-tab> <ion-tab title="登录" icon="ion-ios-person" ui-sref="tabs.login" > <ion-nav-view name="login-tab"></ion-nav-view> </ion-tab></ion-tabs>
这里要注意的是,这里使用的是UI-Router,不是ng-Router,前者是基于状态(state)的,想要触发state,有三种方式:1.触发ui-href(ionic封装的是ui-sref),就是直接点击了状态 2.点击了某个状态对应的href 3.使用函数
$state.go('stateName'),这样的方式适合放在service里面调用
记录备忘
阅读全文
0 0
- ionic的ion-tabs和ion-side-menus
- Ionic基础——侧边栏ion-side-menus 以及ion-tap结合侧边栏详解
- ionic的组件 ion-tabs的一个实例
- ionic中 ion-tabs嵌套问题的解决
- ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
- ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
- Ionic ion-header-bar、bar-subheader、ion-tabs
- ionic组件ion-tabs(选项卡)实例
- ionic ion-tabs底部栏隐藏
- ionic 隐藏ion-tabs底部导航 hide-tabs
- ionic 隐藏ion-tabs 并解决延迟问题 (tabs)
- ionic 隐藏ion-tabs底部导航 hide-tabs
- ionic开发中页面跳转隐藏ion-tabs
- ionic入门教程第九课-开始动手做项目吧!ion-nav-bar、ion-nav-buttons、ion-tabs
- ionic入门教程第九课-开始动手做项目吧!ion-nav-bar、ion-nav-buttons、ion-tabs
- ionic ion-refresher 下拉刷新的使用。
- ionic---ion-view 视图的生命周期
- 【Ionic】 <ion-navbar>标签的用法;
- idea中Git与GitHub的使用入门
- 安全的信息发送器
- 在标签选项卡中添加基本组件
- Android 实现背景音乐的播放及震动
- [swift]调用匿名函数初始化属性
- ionic的ion-tabs和ion-side-menus
- 经典的print_table学习
- 第3章——表、栈和队列
- mysql之连表查询:LEFT JOIN、RIGHT JOIN、INNER JOIN。
- Testdisk 操作指南
- iptables替换firewalld
- Scrollview嵌套百度地图MapView导致滑动有黑边或者阴影问题
- opencv Camshift
- java-面试题