Ionic默认的Tabs模板使用实例

(编辑:jimmy 日期: 2024/10/3 浏览:2)

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就在下面了 并且别的组件工作也正常 

 Ionic默认的Tabs模板使用实例

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

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。