1.导包

 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

     <title>ui-sref</title>

     <link href="../../lib/css/ionic.css" rel="stylesheet">

     <script src="../../lib/js/ionic.bundle.js"></script>

     <script src="js/app.js"></script>

2.写js路由

 var myapp = angular.module('myapp', ['ionic']);
//配置路由

 myapp.config(function($stateProvider,$urlRouterProvider) {

     $stateProvider

         .state('tour', {

             url: '/',

             templateUrl: 'pages/tour/tour.html',

             controller:"tourCtrl"

         })

         .state('home', {

             url: '/home',

             templateUrl: 'pages/home/home.html'

         }).state('hotel', {

             url: '/hotel',

             templateUrl: 'pages/hotel/hotel.html'

         }).state('yuding', {

             url: '/yuding',

             templateUrl: 'pages/yuding/yuding.html'

         });

     $urlRouterProvider.otherwise("/");

 });

3.html页面

 <body ng-app="myapp">

     <ion-tabs class="tabs-positive tabs-icon-top">

         <!--第一页-->
　　//分别添加ui-serf和name

         <ion-tab title="首页" icon-on="ion-ios-filing" ui-sref="home" icon-off="ion-ios-filing-outline">

             <ion-nav-view class="slide-left-right" name="tab-home">

             </ion-nav-view>

         </ion-tab>

         <!--第二页-->

         <ion-tab title="新闻" icon-on="ion-ios-paw"  ui-sref="news" icon-off="ion-ios-paw-outline">

             <ion-nav-view class="slide-left-right" name="tab-news">

             </ion-nav-view>

         </ion-tab>

         <!--第三页-->

         <ion-tab title="设置" icon-on="ion-ios-gear"  ui-sref="setting" icon-off="ion-ios-gear-outline">

             <ion-nav-view class="slide-left-right" name="tab-setting">

             </ion-nav-view>

         </ion-tab>

     </ion-tabs>

4.三个分页面

<ion-view title="首页"> <ion-content> 第一页 </ion-content> </ion-view>

<ion-view title="新闻"> <ion-content> 第二页 </ion-content> </ion-view>

<ion-view title="设置"> <ion-content> 第三页 </ion-content> </ion-view>

效果:

Ionic实现路由ion-tabs的更多相关文章

  1. Angular和Ionic的路由跳转

    一.Angular和Ionic的路由跳转 Angular的路由跳转: constructor(private router:Router){    } .... this.router.navigat ...

  2. 关注Ionic底部导航按钮tabs在android情况下浮在上面的处理

    Ionic是一款流行的移动端开发框架,但是刚入门的同学会发现,Ionic在IOS和android的底部tabs显示不一样.在安卓情况下底部tabs会浮上去. 如下图展示:  网上也有很多此类的解决方案 ...

  3. 【摸鱼神器】一次搞定 vue3的 路由 + 菜单 + tabs

    做一个管理后台,首先要设置路由,然后配置菜单(有时候还需要导航),再来一个动态tabs,最后加上权限判断. 这个是不是有点繁琐?尤其是路由的设置和菜单的配置,是不是很雷同?那么能不能简单一点呢?如果可 ...

  4. ionic简单路由及页面传参

    1)页面跳转及传参方法 angular.module('app.routes', [])//routes路由模型 .config(function($stateProvider, $urlRouter ...

  5. ionic关于隐藏底部tabs终极解决方案

    网上看到很多都是写个指令,监听view进出对tab进行显示隐藏,试过挺多个,自己写了一个,都不是太让人满意,问题大多数为: 1.二级页面是隐藏了tab,但是进去三级视图发现tab又出来了 2.三级,四 ...

  6. ionic 向路由中的templateUrl（模板页）传值

    .state('product', { url: '/product/:id', templateUrl: function ($routeParams) { return '/Product/Ind ...

  7. ionic入门教程-ionic路由详解（state、route、resolve）(转)

    http://blog.csdn.net/onil_chen/article/details/51758696?appinstall=0 今天好好的跟大家讲讲ionic的路由配置. 问到的朋友有点多, ...

  8. Ionic开发实战

    转自:http://blog.csdn.net/i348018533/article/details/47258449/ 折磨的两个月!Ionic从零单排,到项目发布!遇到了很多问题但都一一解决了,此 ...

  9. 初识ionic

    1.Ionic环境安装 Ionic开发是依赖于Nodejs环境的,所以在开发之前我们需要安装好Nodejs.下载安装:http://nodejs.org/ 安装完成之后打开PowerShell输入命令 ...

随机推荐

  1. Spring Boot启动提示：org.apache.catalina.LifecycleException: A child container failed during start

    一.问题回顾 最近在做一个新项目,从git上下载导入idea后,启动项目,但是报了如下错误: java.util.concurrent.ExecutionException: org.apache.c ...

  2. 第二个视频作品《[SpringCloudAlibaba]微服务之注册中心nacos》上线了

    1.场景描述 第二个视频作品出炉了,<[SpringCloudAlibaba]微服务之注册中心nacos>上线了,有需要的朋友可以直接点击链接观看.(如需购买,请通过本文链接购买) 2. ...

  3. AST抽象语法树 Javascript版

    在javascript世界中,你可以认为抽象语法树(AST)是最底层. 再往下,就是关于转换和编译的"黑魔法"领域了. 现在,我们拆解一个简单的add函数 function add ...

  4. weblogic启动服务器Authentication denied: Boot identity not valid

    新分配的测试服务器,已经安装好了weblogic,使用命令nohub ./startWeblogic.sh启动weblogic没有问题 登录控制台,点击环境-服务器-新建,一步步完成后,点击部署.选择 ...

  5. MySQL去重保留最大的那条记录（取最新的记录）

    以用户登录日志表为例,取用户最近登录的设备 1 SET NAMES utf8mb4; 2 ; 3 4 -- ---------------------------- 5 -- Table struct ...

  6. js 实现ReplaceAll 的方法

    JS  字符串有replace() 方法.但这个方法只会对匹配到的第一个字串替换. 如下例: <HTML> <HEAD> <TITLE> New Document ...

  7. MongoDB(四)：数据类型、插入文档、查询文档

    1. 数据类型 MongoDB支持许多数据类型. 字符串 - 这是用于存储数据的最常用的数据类型.MongoDB中的字符串必须为UTF-8. 整型 - 此类型用于存储数值. 整数可以是32位或64位, ...

  8. CF140C New Year Snowmen

    题目链接 这道题其实吧,水,我们教练说过,不要看标签,这只是CSP第一题的题目 思路嘛,priority_queue和贪心,就这样,很水 这是代码 还有,一定要在cf上交,不然--可以看一下提交记录, ...

  9. 使用hexo、github Pages搭建博客

    1. 安装node 如果本机已经有node,为避免安装出现问题,建议先升级到最新版.参考:https://juejin.im/post/5b9739d1e51d450e9f66ee3b 2. 安装he ...

  10. CSS学习笔记-过渡模块

    过渡模块:    1.过渡三要素        1.1必须要有属性发生变化        1.2必须告诉系统哪个属性需要执行过渡效果        1.3必须告诉系统过渡效果持续时长    2.格式: ...