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里面调用


记录备忘


原创粉丝点击