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


Posted in Javascript onAugust 27, 2016

介绍

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

效果图

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

实例代码

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

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

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
You might like
php实现ping
2006/10/09 PHP
浅析PHP水印技术
2007/02/14 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
prototype 中文参数乱码解决方案
2009/11/09 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
Django Celery异步任务队列的实现
2019/07/24 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
浅谈Python中的继承
2020/06/19 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
python3实现飞机大战
2020/11/29 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
酒店中秋节促销方案
2014/01/30 职场文书
食品安全标语
2014/06/07 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
明星邀请函
2015/02/02 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书