Web开发学习笔记:ionic组件ion-tabs选项卡切换效果实例

最新推荐文章于 2021-03-26 16:58:45 发布

JustWantToFly

最新推荐文章于 2021-03-26 16:58:45 发布

阅读量623

点赞数 1

分类专栏： Web开发学习笔记文章标签： WebApp Web Ionic ion-tabs 选项卡切换

Web开发学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

转载自:https://www.jb51.net/article/91381.htm

介绍

ion-tabs是ionic中的选项卡组件，路由使用的是angular-ui-router.js。因此必须先掌握uiRoute。

效果图

实例代码

index.html

<body ng-app="starter">

 <!--ion-nav-view用来渲染模板-->

 <ion-nav-view></ion-nav-view>

</body>

tab-index.html

<ion-tabs class="tabs-icon-only tabs-icon-top ">

 <!--href:选项卡对应的状态 icon-on:ion-tab非高亮图标  icon-off:ion-tab高亮图标-->

 <ion-tab title="首页" href="#/tabs/home" icon-on="ion-new-home-off" icon-off="ion-new-home">

 <!--同一状态下有多个ion-nav-view,因此需要给它们设置name属性。并在配制路由的时候对应状态和渲染视图-->

 <ion-nav-view name="tab-home"></ion-nav-view>

 </ion-tab>

  

 <ion-tab title="淘宝" href="#/tabs/taobao" icon-off="ion-new-tf" icon-on="ion-new-tf-off">

 <ion-nav-view name="tab-taobao"></ion-nav-view>

 </ion-tab>

  

 <ion-tab title="好货" icon-off="ion-new-zhemai" icon-on="ion-new-zhemai-off">

 </ion-tab>

  

 <ion-tab title="我的" href="#/tabs/user" icon-off="ion-new-user" icon-on="ion-new-user-off">

 <ion-nav-view name="tab-user"></ion-nav-view>

 </ion-tab>

</ion-tabs>

config.js

.state("tabs", {

 url: "/tabs",

 templateUrl : "templates/tab/tab-index.html",

 controller : "tabs"

})



.state("tabs.home", {

 url: "/home",

 views : {

 "tab-home" : {

  templateUrl : "templates/home/home.html"

 }

 }

})

.state("tabs.taobao", {

 url: "/taobao",

 views : {

 "tab-taobao" : {

  templateUrl : "templates/taobao/taobao.html"

 }

 }

})

.state("tabs.user", {

 url: "/user",

 views : {

 "tab-user" : {

  templateUrl : "templates/user/user.html"

 }

 }

})

接着就可以分别在home.html taobao.html user.html 下编写各个选项卡的内容

例如:

home.html

<ion-header-bar class="bar bar-header assertive-bg bar-home">

 <ion-title>首页</ion-title>

</ion-header-bar>



<ion-view>

 <ion-content>



 <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>



 </ion-content>

</ion-view>

注意：不要将ion-tabs置入一个ion-content元素内；它会造成一定的已知CSS错误。

JustWantToFly

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web开发学习笔记:ionic组件ion-tabs选项卡切换效果实例

转载自:https://www.jb51.net/article/91381.htm介绍ion-tabs是ionic中的选项卡组件，路由使用的是angular-ui-router.js。因此必须先掌握uiRoute。效果图实例代码index.html<body ng-app="starter"><!--ion-nav-view用来渲染模板...
复制链接

扫一扫