编程 Javascript

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

Posted in Javascript onAugust 27, 2016

介绍

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

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

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

- Author -

安人多梦

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

ImageFlow可鼠标控制图片滚动

Jan 30 Javascript

学习ExtJS（一）之基础前提

Oct 07 Javascript

25个优雅的jQuery Tooltip插件推荐

May 25 Javascript

javascript 使td内容不换行不撑开

Nov 29 Javascript

Ajax同步与异步传输的示例代码

Nov 21 Javascript

JS获取当前日期时间并定时刷新示例

Mar 04 Javascript

基于JQuery实现图片轮播效果(焦点图)

Feb 02 Javascript

javascript事件绑定学习要点

Mar 09 Javascript

用jquery快速解决IE输入框不能输入的问题

Oct 04 Javascript

BootStrapValidator初使用教程详解

Feb 10 Javascript

Ajax基础知识详解

Feb 17 Javascript

微信小程序遍历Echarts图表实现多个饼图

Apr 25 Javascript

郁闷!ionic中获取ng-model绑定的值为undefined如何解决

Aug 27 #Javascript

ionic实现带字的toggle滑动组件

Aug 27 #Javascript

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

Apr 15 #Javascript

ionic实现滑动的三种方式

Aug 27 #Javascript

js select实现省市区联动选择

Apr 17 #Javascript

轻松掌握JavaScript装饰者模式

Aug 27 #Javascript

node.js实现快速截图

Aug 27 #Javascript