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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
vue实现表单录入小案例
Sep 27 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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匹配字符中链接地址的方法
2014/12/22 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
vue.js表格分页示例
2016/10/18 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Django小白教程之Django用户注册与登录
2016/04/22 Python
python向图片里添加文字
2019/11/26 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
详解如何修改python中字典的键和值
2020/09/29 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
树转促学习心得体会
2014/09/10 职场文书
班主任工作实习计划
2015/01/16 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
总结Python连接CS2000的详细步骤
2021/06/23 Python
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js