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. Pikachu-环境搭建

    1.首先进行基础环境——本地服务器搭建. 这里使用xampp实现. 首先安装软件 配置apache 启动xampp以搭建本地服务器 2.安装Pikachu 配置xampp数据库信息 打开config. ...

  2. C# get folder's Md5 generated by file's and filename's md5. get dictionary md5

    C# get dictionary md5 static string GetDicMD5(string dirFullName) { logBuilder = new StringBuilder() ...

  3. Consul-template+nginx实现自动负载均衡

    前言 consul-template 是 Consul 的一个守护程序,使用 consul-template 可以方便快速的实现对 Consul Key/Value 存储系统的访问,可以从 KV 系统 ...

  4. WPF 3D Cube及点击交互

    在WPF中构建一个简单的立方体比较容易实现,可参考资料也比较众多.比较麻烦的是处理点击交互. 我在WPF中用两种方式实现了3DCube,效果图如下: 方式一: 最常见的3D内容构建模式,结构如下图. ...

  5. mysql-5.7.27安装

    1,下载5.7.27安装包   百度网盘   (注:5.7.27要安装net faframework4.5.2) 2,创建my.ini及data文件 下载5.7.27后解压,在创建my.ini文件及d ...

  6. Lucene&Solr框架之第二篇

    2.1.开发环境准备 2.1.1.数据库jar包 我们这里可以尝试着从数据库中采集数据,因此需要连接数据库,我们一直用MySQL,所以这里需要MySQL的jar包 2.1.2.MyBatis的jar包 ...

  7. Bootstrap4 本地编译运行

    Step1. 获取Bootstrap源代码 https://github.com/twbs/bootstrap Step2. 进入目录并切换npm源 npm --registry https://re ...

  8. C lang: The caracter reverse

    Ax_Code #include<stdio.h> int main(void) { int i; char string[7] = {"mrsoft"}; char ...

  9. RMAN命令详解和常用汇总

    RMAN命令详解和常用汇总转摘汇集,日后使用本文链接:https://blog.csdn.net/EVISWANG/article/details/50448370http://blog.itpub. ...

  10. windows 下 安装vue环境 以及创建新项目 极简

    一.安装node.js(https://nodejs.org/en/) 官网下载安装 验证命令: node -v 二.安装npm npm install -g cnpm --registry=http ...