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. Elasticsearch(GEO)数据写入和空间检索

    Elasticsearch简介 什么是 Elasticsearch? Elasticsearch 是一个开源的分布式 RESTful搜索和分析引擎,能够解决越来越多不同的应用场景. 本文内容 本文主要 ...

  2. HUE Oozie : error=2, No such file or directory采坑记录

    HUE Oozie : error=2, No such file or directory采坑记录 1.错误详情 一直都是同一种方式在hue上定义workflow,不知为啥 今天定义的就是不行... ...

  3. IPFS学习-内容标识符(CIDs)

    内容标识符(CIDs) 内容标识符也称为CID,是用于指向IPFS中材料的标签. 它不会指示内容的存储位置,但会根据内容本身形成一种地址. CID简短,无论其基础内容的大小如何. CID基于内容的加密 ...

  4. 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU开发那些事 - 索引

    大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是恩智浦i.MX RTxxx系列微控制器相关知识. 恩智浦半导体于2018年10月发布的i.MX RTxxx系列开启了ML/AI MCU ...

  5. [debug] 解决新建项目属性中没有 c\c++

    写一些代码(不写不行),然后生成,然后就可以看到这个选项了

  6. 对Python中一些“坑”的总结及技巧

    一.赋值即定义 1.运行以下代码会出现报错 #!/usr/bin/env python #_*_conding:utf-8_*_ x = 100 def outer(): def inner(): x ...

  7. Android TeaScreenPopupWindow多类型筛选弹框

    多类型筛选弹框.多数据筛选.多样化diy.单选or多选.必藏 (Multiple Type Screening Boxes, Multiple Data Screening, Diversified ...

  8. 【Kafka】《Kafka权威指南》——提交和偏移量

    KafkaConsumer(消费者)每次调用 poll()方法,它总是返回由生产者写入 Kafka但还没有被消费者读取过的记录, 我们因 此可以追踪到哪些记录是被群组里的哪个消费者读取的.之前已经讨论 ...

  9. Excel上下标如何设置？

    Excel表格怎么设置上下标?Excel上下标设置技巧 在21世纪的我们,平时的工作和学习中,经常会使用到一些专业的文档,比如方程式.数据的公式和科学计数等,其中均会涉及到许多的上下标符号输入以及使用 ...

  10. 用 Python 图像识别打造一个小狗分类器

    ​ 项目介绍 小狗分类器可以做什么? 通过这个分类器,你只需要上传照片,就可以得到小狗的品种,以及更多的信息. 这就是所谓的「机器学习」,让机器自己去“学习”.我们今天要做的这个分类任务,是一个“监督 ...