路由-标签切换

青旅半醒 2022-06-07 11:49 177阅读 0赞

效果：

![Center][]

依赖：

代码：

<!DOCTYPE html>
    <html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
        <title>路由-标签切换</title>
        <script type="text/javascript">
            var app = angular.module("myApp", ["ionic"]);
    
            app.config(function ($stateProvider, $urlRouterProvider) {
                $stateProvider.state("home", {
                    url: "/home",
                    views: {
                        "views-home": {
                            templateUrl: "home.html"
                        }
                    }
                }).state("cart", {
                    url: "/cart",
                    views: {
                        "views-cart": {
                            templateUrl: "cart.html"
                        }
                    }
                }).state("mine", {
                    url: "/mine",
                    views: {
                        "views-mine": {
                            templateUrl: "mine.html"
                        }
                    }
                })
            });
        </script>
    </head>
    <body>
    <ion-tabs class="tabs-positive tabs-icon-top">
        <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="home">
            <ion-nav-view name="views-home"></ion-nav-view>
        </ion-tab>
    
        <ion-tab title="购物车" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="cart">
            <ion-nav-view name="views-cart"></ion-nav-view>
        </ion-tab>
    
        <ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="mine">
            <ion-nav-view name="views-mine"></ion-nav-view>
        </ion-tab>
    </ion-tabs>
    
    <script id="home.html" type="text/ng-template">
        这是“首页”页面HTML内容
    </script>
    
    <script id="cart.html" type="text/ng-template">
        这是“购物车”页面HTML内容
    </script>
    
    <script id="mine.html" type="text/ng-template">
        这是“我的”页面HTML内容
    </script>
    </body>
    </html>

[Center]: /images/20220607/6cb6ec471a934adfab7da3c743a89e94.png