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. WPF布局容器

    1.StackPanel:堆栈面板,通过Orientation属性设置子元素的布局排列方向为“Vertical”(垂直)和“Horizontal”(水平),不写其默认值为“Vertical”,当设置为 ...

  2. centos6.5安装supervisor

    centos6.5安装supervisor,有很多种方法,但是有很多坑,为了以后不重复踩坑,这里记录一下. 一.如果用yum install supervisor, 默认安装的是2.1.9版本,2.x ...

  3. 分布式图数据库 Nebula Graph 中的集群快照实践

    1 概述 1.1 需求背景 图数据库 Nebula Graph 在生产环境中将拥有庞大的数据量和高频率的业务处理,在实际的运行中将不可避免的发生人为的.硬件或业务处理错误的问题,某些严重错误将导致集群 ...

  4. .net core3.0部署Linux服务器 使用Docker容器和Nginx反代理教程

    本人刚接触.net core 由于公司项目需要部署在Linux上 近些日子学习和网上大面积搜教程 我在这给大家归拢归拢借鉴的教程做了套方案(我写的可以实现 但不一定是最好的 仅供参考) 我只用过cor ...

  5. TensorFlow实现简单线性回归示例代码

    # -*- coding: utf-8 -*- import tensorflow as tf import numpy as np import matplotlib.pyplot as plt d ...

  6. 25.Zabbix入门必备

    ==Zabbix入门必备== 1.配置zabbix源 [root@zabbix ~]# cat /etc/yum.repos.d/zabbix.repo [zabbix] name=Zabbix Of ...

  7. 使用 Flutter 开发 Mac 桌面应用

    Flutter 可以开发 Mac,Linux,Windows 桌面,但是对于平台目前只能打对于的包,以及调试本平台的包. 切换到 master 分支 首先必须切换到 master 分支.我之前在 de ...

  8. SpringBoot项目里，让TKmybatis支持可以手写sql的Mapper.xml文件

    SpringBoot项目通常配合TKMybatis或MyBatis-Plus来做数据的持久化. 对于单表的增删改查,TKMybatis优雅简洁,无需像传统mybatis那样在mapper.xml文件里 ...

  9. LeetCode刷题191127

    数据库: 1179 部门表 Department: +---------------+---------+| Column Name | Type |+---------------+-------- ...

  10. 使用可移动表空间(TTS)的最佳做法 (Doc ID 1457876.1)

    Best Practices for Using Transportable Tablespaces (TTS) (Doc ID 1457876.1) APPLIES TO: Oracle Datab ...