index.html
<ion-tabs class="tabs-icon-top tabs-stable tabs-color-active-energized" > <ion-tab title="主页" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ui-sref="home" > <ion-nav-view name="home-nav"> </ion-nav-view> </ion-tab> <ion-tab title="测试" icon-on="ion-ios-people" icon-off="ion-ios-people-outline" ui-sref="massagist.listAll" > <ion-nav-view name="test-nav"></ion-nav-view> </ion-tab> <ion-tab title="订单" icon-on="ion-ios-time" icon-off="ion-ios-time-outline" ui-sref="order" > <ion-nav-view name="order-nav"></ion-nav-view> </ion-tab> <ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="my"> <ion-nav-view name="my-nav"></ion-nav-view> </ion-tab> </ion-tabs>
侧边框页:
<ion-view > <ion-side-menus> <ion-side-menu-content> <ion-nav-bar class="bar-energized"> <ion-nav-back-button></ion-nav-back-button> <ion-nav-buttons side="right"> <button class="button button-light button-outline button-small " style="border-radius: 50%" menu-toggle="right"> 分类 </button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view name="test-item-nav" animation="slide-right-left"></ion-nav-view> </ion-side-menu-content> <ion-side-menu side="right"> <div class="bar bar-header bar-dark"> <h1 class="title" >分类</h1> </div> <ion-content class="has-header "> <div class="list" > <a class="item" menu-close ui-sref="button.default">全部</a> <a class="item" menu-close ui-sref="button.default">搜索</a> <div class="item item-divider"> 服务项目 </div> <a class="item" menu-close ui-sref="button.default">Item One</a> <a class="item" menu-close ui-sref="button.block">Item Two</a> <a class="item" menu-close ui-sref="button.full">Item Three</a> <a class="item" menu-close ui-sref="button.small">Item Four</a> <div class="item item-divider"> 排行榜 </div> <a class="item" menu-close ui-sref="button.large">Order One</a> <a class="item" menu-close ui-sref="button.outline">Order Two</a> <a class="item" menu-close ui-sref="button.clear">Order Three</a> </div> </ion-content> </ion-side-menu> </ion-side-menus> </ion-view>
路由:
angular.module('app') .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('test', { url: '/test', abstract:true, views: { 'test-nav': { templateUrl: 'views/侧边框页.html', controller: 'TestController' } } }).state('test.listAll', { url: '/listAll', views: { 'test-item-nav': { templateUrl: 'views/显示页.html', controller: 'MassagistListController' } } }) ); });
相关推荐
使用angular路由自定义ionic4中的tabs切换,因为在实际项目中,需要自定义项目目录,需要手动定义tabs。
在网上找了很长时间,但找到的ionic登陆页login跳转到tabs的方法在ionic4上基本都无效,后来终于找到了解决这个问题的办法,简单易行,前两天发表了一篇ionic4和ionic5创建login登陆页跳转到tabs方法的博客,现在写...
移动前端框架 ionic.zip
ionic框架参考手册中文ionic框架参考手册中文ionic框架参考手册中文ionic框架参考手册中文ionic框架参考手册中文
支持自定义分页 多张图片上传 实时地图 自定义图标 chart 极光推送 等
ionic-tabs-starter-sass-jade-coffee 通过Sass,Jade和CoffeeScript实现的离子选项卡式视图启动程序项目。 JavaScript中的原始项目是由 @ ,该项目是根据Angular样式指南重构的Ionic标签式视图启动器项目。 特征 ...
基于ionic tabs模板应用修改而来 更符合实际业务需求
由于国内下载ionic4的demo资源有时候会出现奇怪的错误产生,所以我在官网下载了一份已经下载好的demo提供给大家下载!
手机混合开发框架ionic中,使用captureAudio进行语音录制,并实现播放功能。
由于国内下载ionic4的demo资源有时候会出现奇怪的错误产生,所以我在官网下载了一份已经下载好的demo提供给大家下载!
ionic开发资源。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
主要为大家详细介绍了ionic隐藏tabs的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
ionic2_tabs, 一个不断完善的ionic2项目
ionic HTML5 移动应用框架是一个神奇的框架和强大前端开源系统,使用先进的 web 技术比如 CSS、HTML 和 JS 来创建令人惊叹的手机应用。它已经定制了在所有手机设备上的快速操作,并且确保简单的功能和大量的手机组件...
主要是ionic2和ionic3的他们两者的优缺点,以及更新的新内容
超级标签适用于Ionic应用程序的可... ionic2-super-tabs笔记此模块仅通过基于Angular和Stencil的应用程序进行了测试。 与React和Vue的兼容性尚未经过测试。执照此项目已获得MIT许可证的许可-有关详细信息,请参阅文件
ireader##An Rss reader using ionic and localforage is a Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly ...
本文介绍了H5的开发框架Ionic的基本概念,和cordova、Angular.js的关系和版本,Ionic的入门介绍,如何安装环境,创建一个h5项目,并且编译打包,安装到手机或模拟器运行,以及学习资源、ionic一体化开发工具ionic...
java ajax angular jquery ionic 框架百度云视频教程,Angular4、angular5 Ionic3 Nodejs打造京东商城移动端项目
Ionic 默认的Tabs 模板 ,Android的在上方,IOS的在下方。在www/js/app.js修改配置,添加一个变量,再修改相应属性: .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {$...