ionic组件ion-tabs选项卡切换效果实例

介绍

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错误。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换操作</title> <link rel="stylesheet"

  • ionic实现可滑动的tab选项卡切换效果

    ionic实现可滑动的tab选项卡切换效果

    利用ionic的slide-box组件实现可滑动的tab,主要是监听tab点击以及slide页面滑动的事件,做相应的处理,用ng-repeat循环,优化.简略了代码,有需要的同学可以看看. 先来张效果图: 用到的css代码: .tab_default{ border-bottom:solid 1px #F2F2F2; padding:6px 0; } .tab_select{ border-bottom:solid 1px #3E89F5; box-shadow:0 -3px 8px #C1D3

  • javascript实现tabs选项卡切换效果(扩展版)

    前段时间写了个tabs 选项卡切换效果,今天抽空在原有的基础上进行了扩展,加入了自动轮播,这样就变成了类似图片轮播的效果了. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</title> <link rel="styleshe

  • javascript实现tabs选项卡切换效果(自写原生js)

    javascript实现tabs选项卡切换效果(自写原生js)

    现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下:  html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</

  • ionic组件ion-tabs选项卡切换效果实例

    ionic组件ion-tabs选项卡切换效果实例

    介绍 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="

  • 很棒的js选项卡切换效果

    很棒的js选项卡切换效果

    本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下 js选项卡切换代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Auth

  • jQuery实现Tab选项卡切换效果简单演示

    jQuery实现Tab选项卡切换效果简单演示

    本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考.具体如下: 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-

  • Jquery组件easyUi实现选项卡切换示例

    Jquery组件easyUi实现选项卡切换示例

    本文实例为大家分享了Jquery easyUi选项卡切换效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" hre

  • vue+element tabs选项卡分页效果

    本文实例为大家分享了vue+element tabs选项卡分页效果的具体代码,供大家参考,具体内容如下 文件目录: 功能展示: 路由配置: { path: '/account', component: ()=> import('../components/home/home.vue'), //布局页面 redirect: '/account/all-account/list', //定向到list路径 name: '账号管理', children: [ { path: '/account/all

  • 基于javascript实现最简单的选项卡切换效果

    本文实例为大家分享了js选项卡切换效果的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>朱朱制作</title> <script src="js/jquery.js" type="text/javascript"></script> &

  • js实现Tab选项卡切换效果

    js实现Tab选项卡切换效果

    本文实例为大家分享了js实现Tab选项卡切换效果展示的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="tab.css"> <script src="tab.js&quo

  • 简单实现js选项卡切换效果

    本文实例为大家分享了js选项卡切换效果的具体代码,供大家参考,具体内容如下 实现思路: 1.首先获取id元素. 2.for循环历遍按钮元素添加onclick事件. 3.排他思想,点击按钮时设置所有选项卡按钮样式为空,利用this关键字指定当前选项卡获得高亮样式. 4.下面的多个div内容块以此类推. 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

随机推荐