Ionic默认的Tabs模板使用实例

Ionic 默认的Tabs 模板  ，Android的在上方，IOS的在下方。在www/js/app.js修改配置，添加一个变量，再修改相应属性：

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {$ionicConfigProvider.platform.ios.tabs.style('standard');
 $ionicConfigProvider.platform.ios.tabs.position('bottom');
 $ionicConfigProvider.platform.android.tabs.style('standard');
 $ionicConfigProvider.platform.android.tabs.position('bottom');

 $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
 $ionicConfigProvider.platform.android.navBar.alignTitle('left');

 $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
 $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back'); 

 $ionicConfigProvider.platform.ios.views.transition('ios');
 $ionicConfigProvider.platform.android.views.transition('android');

然后再在Android平台上调试 Tabs就在下面了 并且别的组件工作也正常

特别注意
Cordova的配置一定要正确 尤其是Android ADT
Visual Studio 默认是不配置的
具体参考这篇文章
 

代码如下:

').addClass('pre-numbering').hide(); \((this).addClass('has-numbering').parent().append(\)numbering); for (i = 1; i <= lines; i++) { \(numbering.append(\)('
 ').text(i)); }; $numbering.fadeIn(1700); }); });

以上就介绍了Ionic Tabs，包括了ionic,tabs方面的内容，希望对IOS开发有兴趣的朋友有所帮助。

赞 (0)

相关推荐

  • ionic中列表项增加和删除的实现方法

    ionic中列表项增加和删除的实现方法

    在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,例如: 要实现可以选中商品,以及对商品的信息列表进行显示与否的操作 html代码如下: <div class="chanpinxiangqing"> <div class="item item-divider">产品明细</div> <div class="chanpinxiangqing" ng-repeat="master in m

  • 使用JS轻松实现ionic调用键盘搜索功能(超实用)

    这个需求是产品提的,一开始只是设置了 <input style="padding-top: 3px;" type="search" placeholder="搜索医生或医院" ng-model="query"> type="search" 发现android上可以ios调取不出search健来,气死我了,经过google的搜索得到结论,需要在外面套用一个form表单,于是加上果然好使而且结合了f

  • 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="

  • ionic隐藏tabs的方法

    本文为大家分享了ionic隐藏tabs的方法,供大家参考,具体内容如下 1. <ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}"> <!-- tabs --> </ion-tabs> 2. 在该控制器下加上.directive: var module = angular.module('app.directives', []); module.directive('showTabs', fu

  • 如何解决IONIC页面底部被遮住无法向上滚动问题

    Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用.提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择. ionic 特点 1.ionic 基于Angular语法,简单易学.[3] 2.ionic 是一个轻量级框架. 3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVVM ,代

  • ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)

    在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案. 我就不仔细讲代码了,直接上图 angular.module('MyApp') .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$io

  • Ionic默认的Tabs模板使用实例

    Ionic默认的Tabs模板使用实例

    Ionic 默认的Tabs 模板  ,Android的在上方,IOS的在下方.在www/js/app.js修改配置,添加一个变量,再修改相应属性: .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {$ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.ios.tabs.pos

  • Pycharm新建模板默认添加个人信息的实例

    在pycharm使用过程中,对于每次新建的python文件的时候,关于代码编写者的一些个人信息快捷填写,使用模板的方式比较方便. 方法如下: 1.打开pycharm,选择File-Settings 2.Editor –> File and Code Templates –> Python Script 3.填写个人信息 #!/usr/bin/env python #-*- coding:utf-8 -*- # author:${USER} # datetime:${DATE} ${TIME}

  • SpringMVC中使用Thymeleaf模板引擎实例代码

    本文研究的主要是SpringMVC中使用Thymeleaf模板引擎的相关内容,具体介绍如下. Thymeleaf提供了一组Spring集成,允许您将其用作Spring MVC应用程序中全面替代JSP的功能. Maven依赖 <!-- thymeleaf-spring4 --> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring4</artifa

  • Django视图层与模板层实例详解

    Django视图层与模板层实例详解

    目录 theme: channing-cyan 网页伪静态 视图层 1.视图函数的返回值问题 2.视图函数返回json格式数据 3.form表单携带文件数据 4.FBV与CBV 5.CBV源码分析 模板层 1.模板语法传值 2.模板语法传值的范围 3.模板语法值过滤器 4.模板语法标签(类似于python中的流程控制) 5.自定义标签函数.过滤器.inclusion_tag 6.模板的继承 7.模板的导入 theme: channing-cyan 网页伪静态 将动态网页伪装成静态网页,可以提升网

  • Java默认传入时间段时间的实例

    实例如下: SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); Date date = new Date(); String nowDate = sdf.format(date); Calendar c = Calendar.getInstance(); c.add(Calendar.MONTH, 0); c.set(Calendar.DAY_OF_MONTH,1);//设置为1号,当前日期既为本月第一天 String

  • jQuery EasyUI Layout实现tabs标签的实例

    jQuery EasyUI Layout实现tabs标签的实例

    jQuery EasyUI Layout实现tabs标签的实例 一.概述: 1.引入jquery.js与easyUi相关文件 2.效果如图: 二.创建Layout主页: <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!D

  • ionic2 tabs 图标自定义实例

    ionic2 tabs 图标自定义实例

    一.准备资源 tabs icon 的svg格式的矢量图片 二.生成字体样式文件 打开icoMoon网站去制作字体文件. 三.使用字体文件 解压下载的文件,将其中的fonts文件夹拷贝到ionic2项目的src/assest目录下.并且将其目录下的styles.css文件命名为wecare.scss(这个名称是你字体的文件名称),再将其拷贝到ionic2项目的src/assest/fonts目录下.下来我们去修改wecare.scss文件. 修改@font-face中的引用地址. $font-pa

  • 详解Spring data 定义默认时间与日期的实例

    详解Spring data 定义默认时间与日期的实例 前言: 需求是这样的: 1. 创建时间与更新时间只能由数据库产生,不允许在实体类中产生,因为每个节点的时间/时区不一定一直.另外防止人为插入自定义时间时间. 2. 插入记录的时候创建默认时间,创建时间不能为空,时间一旦插入不允许日后在实体类中修改. 3. 记录创建后更新日志字段为默认为 null 表示该记录没有被修改过.一旦数据被修改,修改日期字段将记录下最后的修改时间. 4. 甚至你可以通过触发器实现一个history 表,用来记录数据的历

  • Android开发之Android.mk模板的实例详解

    Android开发之Android.mk模板的实例详解

    Android开发之Android.mk模板的实例详解 关于Android NDK开发的文章已经比较多了,我的博客中也分享了很多NDK开发相关经验和技巧,今天简单写了一个 Android.mk 的示例模板,供初学者参考. 本模板主要给大家示例 Android NDK 开发中的如下几个问题: 1. 如何自动添加需要编译的源文件列表   2. 如何添加第三方静态库.动态库的依赖   3. 如何构造一个完整的NDK工程框架 假设我们的项目依赖 libmath.a, libjson.a, libffmp

  • 使用Maven Archetype插件构建Maven工程原型模板的实例

    创建原型模板 1.在空目录运行archetype:generate上面的命令,待下载完必要的jar包后,首先需要输入内置的原型编号: Choose archetype: 1: internal -> org.apache.maven.archetypes:maven-archetype-archetype (An archetype which contains a sample archetype.) 2: internal -> org.apache.maven.archetypes:ma

随机推荐