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开发有兴趣的朋友有所帮助。

时间: 2024-11-23 09:34:15

Ionic Tabs的相关文章

ionic tabs隐藏完美解决

开发app过程中需要进行子页面tabs隐藏,网上找了N多方案,度娘出来的都是写指令, 但是测试中bug明显,于是墙外谷歌..终于找到完美的方法,如下 tabs.html <ion-tabs class=" " ng-controller="TabsCtrl" ng-class="{'tabs-item-hide': hideTabs}"></ion-tabs> controller里 .controller('TabsCt

Cordova+angularjs+ionic+vs2015开发(五)

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideMenu和Ionic Tabs项目.将SideMenu和Tabs项目里的templates和js文件合并到空项目里,修改js对应的代码即可.完整项目工程如下: 2.App.js代码修改如下: /* * 加载所需要的各个模块 * 上篇教程中加载了controllers控制器模块 * 本篇教程加载了ser

[转]Ionic系列——CodePen上的优秀Ionic_Demo

本文转自:http://my.oschina.net/u/1416844/blog/514361?fromerr=bbFC5JIl 案例网站 Slidebox with Dynamic Slides Ionic UL search example Ionic Accordian ion-affix performance demo (就是这个栏目下的标题一直显示在最上面) Button Bar as Top Tabs FAB Menu Tab layout - view content gap

ionic(一) build你的第一个android apk

1.ionic start myApp tabs    >>创建一个app 2.cd myApp  >>进入myApp文件 3.ionic platform add android   >>为app添加安卓平台 4.ionic build android  >>将app打包成安卓apk安装包 注意:在整个过程中,你的电脑需要安装JDK.Ant.Android SDK.Node.js.ionic.在安装的时候,在配置环境的时候要注意,因为在最后打包出现问题最多

ionic[select][tabs]

1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no&qu

在meteor中如何使用ionic组件tabs,及如何添加使用cordova plugin inappbrower

meteor框架的优点不言而喻,它大大减轻了App前后端开发的负担,今年5月又获得B轮2000万融资,代表了市场对它一个免费.开源开发框架的肯定.cordova的优点就是插件多,ionic的优点是UI漂亮并且性能是目前hybird框架中最好的,本文涉及到的技术为作者所用,简述meteor+cordova+ionic的整合方法. 1,创建项目 meteor create projectName cd [projectName] meteor add urigo:angular meteor add

Ionic android 底部tabs

ionic android tabs 默认显示在上部,如果要跟苹果一起统一在底部,那么可以在app.js添加配置 1 .config(function($ionicConfigProvider) { 2 $ionicConfigProvider.tabs.position('bottom'); 3 })

Ionic的页面堆栈与Tabs菜单相遇的问题(栈只有一个)

本来的需求: 新建的Ionic项目是Tabs菜单,假设有两个选项卡 A 和 B,对应的两个页面的代码完全一样,使用了echarts 插件,并且使用了一个获取页面元素的方法,给自己的一个变量赋值,然后将echarts图写入到这个元素里面. html中<div id="chartContainer"></div> ts中this.chartContainer = document.getElementById('chartContainer'); 这样导致的效果是:

【Ionic系列】2、仿京东商城项目功能分析 修改tabs颜色

1 打开VSCode以后 2 快捷键 Ctrl+J 打开终端 3 创建以下3个页面 4 ionic g page cart 5 ionic g page category 6 ionic g page user 7 并且删除自带的 8 about.contact 1 打开app/app.module.ts, 2 删除出错的两个引用 3 import { AboutPage } from '../pages/about/about'; 4 import { ContactPage } from '