ionic 路由模板

最新推荐文章于 2020-06-22 15:24:10 发布

迷人的脚毛

最新推荐文章于 2020-06-22 15:24:10 发布

阅读量465

点赞数 1

分类专栏： ionic

本文链接：https://blog.csdn.net/qq_40090482/article/details/78294432

版权

ionic 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

向上图：主要实现的效果如下

直接写个模板方面日后用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="lib/css/ionic.css">
    <script src="lib/js/ionic.bundle.min.js"></script>
    <!--把自己写的css样式引入进来-->
    <link rel="stylesheet" href="css/main.css">
    <script>
        var app=angular.module("myapp",["ionic"]);
        //路由
        app.config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider.state("home", {
                url: "/home",
                views: {
                    "view-home": {
                        //templateUrl: 是指定模板
                        templateUrl: "luyou/home.html",
                        //controller 直接给它指定控制器的名字
                        controller: "HomeCtrl"
                    }
                }
            }).state("cart", {
                url: "/cart",
                views: {
                    "view-cart": {
                        templateUrl: "luyou/cart.html",
                    }
                }
            }).state("mine", {
                url: "/mine",
                views: {
                    "view-mine": {
                        templateUrl: "luyou/mine.html",
                    }
                }
            });

            //如果都找不到就会执行此代码    默认地址
            $urlRouterProvider.otherwise("home");
        });

        //侧拉
        app.controller("HomeCtrl",function ($scope, $ionicSideMenuDelegate) {
            //给头部侧拉设置的点击事件toggleLeft（）  可是实现类似开启和关闭效果
            $scope.toggleLeft = function() {
                $ionicSideMenuDelegate.toggleLeft();
            }
        })


    </script>



</head>
<body ng-app="myapp">
<ion-tabs class="tabs-positive tabs-icon-top">
        <!--  ui-sref： 以后路由就用这个代码来写  -->
    <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"ui-sref="home">
        <!--写路由页面的话必须写这行代码    ，   就是路由页面的代码会自动找这行代码-->
        <ion-nav-view name="view-home"></ion-nav-view>

        <!-- 标签 1 内容 -->
    </ion-tab>

    <ion-tab title="关于" icon-on="ion-happy" icon-off="ion-happy-outline" ui-sref="cart">
        <ion-nav-view name="view-cart"></ion-nav-view>
        
        <!-- 标签 2 内容 -->
    </ion-tab>

    <ion-tab title="我的" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"  ui-sref="mine">
        <ion-nav-view name="view-mine"></ion-nav-view>
        <!-- 标签 3 内容 -->
    </ion-tab>

</ion-tabs>
</body>
</html>

红框的地方就是每个页面所写代码模板的地方只要把这些用 templateUrl 引入地址即可

路由就是实现一个切换页面的功能

下面是直接在主页面写模板代码的一种代码，不过还是推荐用上面那种：

不过万一上面有点理解不了，就直接拷贝下面这些代码一步到位

<!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">
    <ion-header-bar class="bar-positive">
        <button class="button button-clear">左按钮</button>
        <h1 class="title">首页</h1>
    </ion-header-bar>

    <ion-content class="has-header">
        这是“首页”页面HTML内容
    </ion-content>
</script>

<script id="cart.html" type="text/ng-template">
    <ion-header-bar class="bar-positive">
        <h1 class="title">购物车</h1>
        <button class="button button-clear">右按钮</button>
    </ion-header-bar>

    <ion-content class="has-header">
        这是“购物车”页面HTML内容
    </ion-content>
</script>

<script id="mine.html" type="text/ng-template">
    <ion-header-bar class="bar-positive">
        <h1 class="title">我的</h1>
        <button class="button button-icon ion-ios-more"></button>
    </ion-header-bar>

    <ion-content class="has-header">
        这是“我的”页面HTML内容
    </ion-content>
</script>
</body>
</html>

迷人的脚毛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic 路由模板

向上图：主要实现的效果如下直接写个模板方面日后用：html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> meta name="viewport" content="width=device-width,minimum-scale=1.0,ma
复制链接

扫一扫

专栏目录