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. 我也开源... React Native Messager

    近期有空,玩转React Native. https://github.com/andyc365/ReactNativeMessager React Native Messager A React N ...

  2. Spring Boot 设置项目名后静态文件相对路径问题

    出现问题的原因 server.servlet.context-path=testDemospring.mvc.static-path-pattern=/static/**定义项目名和静态资源路径后发现 ...

  3. (办公)记事本_Linux权限

    参考谷粒学院Linux教程:http://www.gulixueyuan.com/course/300/task/7084/show# linux权限,什么用户可以操作什么. 1.基本权限的作用: 1 ...

  4. 每个Web开发者都该了解的12条命令行

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://tutorialzine.com/2017/08/12-terminal-comma ...

  5. C# List 根据对象属性去重的四种方法对比

    测试代码: private void TestDistinct() { Task.Run(() => { //生成测试数据 DateTime dt = DateTime.Now; Random ...

  6. 松软科技web课堂:JavaScript If...Else 语句

    条件语句用于基于不同条件执行不同的动作. 条件语句 在您写代码时,经常会需要基于不同判断执行不同的动作. 您可以在代码中使用条件语句来实现这一点. 在 JavaScript 中,我们可使用如下条件语句 ...

  7. maven配置多个镜像

    问题场景 1.国内访问maven默认远程中央镜像特别慢 2.用阿里的镜像替代远程中央镜像 3.大部分jar包都可以在阿里镜像中找到,部分jar包在阿里镜像中没有,需要单独配置镜像 解决方案 setti ...

  8. SQL Server如何找出一个表包含的页信息（Page)

    在SQL Server中,如何找到一张表或某个索引拥有那些页面(page)呢? 有时候,我们在分析和研究(例如,死锁分析)的时候还真有这样的需求,那么如何做呢? SQL Server 2012提供了一 ...

  9. Java_map的key为自定义对象

    首先自定义Key对象 import lombok.AllArgsConstructor; import lombok.Getter; import lombok.Setter; import java ...

  10. C# Winform更换Webbrowse为WebKit

    本人第一次发表博文,内容不精也不是很有水平,请大家多多包涵~ 说到Webbrowser,可能大家都用过这个控件,它默认使用的是旧版本IE内核. 这就导致了一些问题,比如JS的加载不正确,这个问题就足够 ...