选项卡

最新推荐文章于 2024-05-06 21:05:10 发布

Larrywjk

最新推荐文章于 2024-05-06 21:05:10 发布

阅读量125

点赞数

分类专栏： Angular.js

本文链接：https://blog.csdn.net/weixin_44423801/article/details/90754834

版权

Angular.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

首先是这个路由的名字tab.dash这里的点和js中的点一样理解为对象的属性，这里表示一种从属关系。指dash这个视图是tab的一个子视图。
这个路由配置和tab的路由配置有个明显不同的地方就是多了一个views，可以简单理解为用来定义视图详情。格式是views:{name:{parms}}
可以看到在tabs地下定义的tab里面有一个ion-nav-view 它的名字定义为‘tab-dash’这个意思就是。tab.dash这个路由定义了，这个路由的视图是在‘tab-dash’这个tab的视图里面绘制的。
这个ion-nav-view我们在index.html中也有见过。
我们对代码做一点小改动。改动tab的配置。加入views属性。
我们看tab的这个路由，url就是路由地址，abstract：true就是指设置这个界面为母版界面，可以这么理解，这是一个架子，所有的子界面都有这个统一的界面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/ionic/css/ionic.css">
    <script src="./lib/ionic/js/ionic.bundle.js"></script>
    <link rel="stylesheet" href="templates/tabs.html">
</head>
<body ng-app="app">
    <!-- 导航栏 -->
    <ion-nav-bar class="bar-positive">
    </ion-nav-bar>
    <ion-nav-view>
    </ion-nav-view>
    <!-- 选项卡 -->
    <!-- <ion-tabs class="tabs-positive tabs-icon-only">
    
      <ion-tab title="Status" icon-off="ion-ios-pulse" 
      icon-on="ion-ios-pulse-strong" href="#/status"> -->
        <!-- 在选项卡子页面渲染视图的容器 -->
        <!-- <ion-nav-view name="tab-status"></ion-nav-view>
      </ion-tab>
      <ion-tab title="Charts" icon-off="ion-ios-chatboxes-outline" 
      icon-on="ion-ios-chatboxes" href="#/chats ">
      <ion-nav-view name="tab-chats"></ion-nav-view>
      </ion-tab> -->
      <!-- Account Tab -->
      <!-- <ion-tab title="Account" icon-off="ion-ios-gear-outline" 
      icon-on="ion-ios-gear" href="#/account">
      <ion-nav-view name="tab-account"></ion-nav-view>
      </ion-tab>
    </ion-tabs> -->

    <!-- 模板页面 -->
    <!-- <script id="templates/states.html" type="text/ng-template">
      <ion-view view-title="Status"> -->
        <!-- view-title,在顶部导航栏设置标题 -->
        <!-- <ion-content class="calm-bg"></ion-content>
      </ion-view>
    </script>
    <script id="templates/chats.html" type="text/ng-template">
      <ion-view view-title="Chats"> -->
        <!-- view-title,在顶部导航栏设置标题 -->
        <!-- <ion-content class="balanced-bg"></ion-content>
      </ion-view>
    </script>
    <script id="templates/account.html" type="text/ng-template">
      <ion-view view-title="Account">
         <ion-content class="assertive-bg"></ion-content> -->
        <!-- view-title,在顶部导航栏设置标题 -->
      <!-- </ion-view>
    </script> -->
    
    
    
</body>
<script>
    var app=angular.module('app',['ionic'])
    // app.controller('StatusCtrl', function($scope) {})
    // .controller('ChatsCtrl', function($scope) {})
    // .controller('AccountCtrl', function($scope) {
    //         $scope.settings = {
    //           enableFriends: true
    //         }
    //       }) 
    //无关
    app.config(function($stateProvider,$urlRouterProvider,$ionicConfigProvider){
        //添加Android平台的选项卡置底
        $ionicConfigProvider.tabs.position("bottom");  
        $ionicConfigProvider.platform.android.navBar.alignTitle('center');
        $stateProvider
          //tab这个路由，url就是路由地址，abstract：true就是指设置这个界面为母版界面，
          //可以这么理解，这是一个架子，所有的子界面都有这个统一的界面。
         .state('tab', {
            url: '/tab',
            abstract: true,
            // templateUrl都是用来定义视图对应的html模板的
            templateUrl: 'templates/tabs.html'
          })
          //首先是这个路由的名字tab.status这里的点和js中的点一样理解为对象的属性，这里表示一种从属关系。
          //指status这个视图是tab的一个子视图。
            .state('tab.status',{
                url:'/status',
                views:{ //配置选项卡
                    'tab-status':{ //匹配选项卡的name属性
                        templateUrl:"templates/states.html"
                    }
                }
            })
            .state('tab.chats',{
                url:'/chats',
                views:{ //配置选项卡
                    'tab-chats':{ //匹配选项卡的name属性
                        templateUrl:"templates/chats.html"
                    }
                }
            })
            .state('tab.account',{
                url:'/account',
                views:{ //配置选项卡
                    'tab-account':{ //匹配选项卡的name属性
                        templateUrl:"templates/account.html" 
                    }
                }
            })
            $urlRouterProvider.otherwise('tab/status')
    })
</script>
</html>

Larrywjk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡

首先是这个路由的名字tab.dash这里的点和js中的点一样理解为对象的属性，这里表示一种从属关系。指dash这个视图是tab的一个子视图。这个路由配置和tab的路由配置有个明显不同的地方就是多了一个views，可以简单理解为用来定义视图详情。格式是views:{name:{parms}}可以看到在tabs地下定义的tab里面有一个ion-nav-view 它的名字定义为‘tab-dash’这...
复制链接

扫一扫