ionic多重路由

最新推荐文章于 2020-06-10 11:38:49 发布

雨下着呢

最新推荐文章于 2020-06-10 11:38:49 发布

阅读量344

点赞数

分类专栏： ionic，路由，多重路由，路由切换文章标签： ionic 路由多重路由路由切换

本文链接：https://blog.csdn.net/qq_39924781/article/details/78236364

版权

ionic，路由，多重路由，路由切换专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一. 首先首页如下

<!DOCTYPE html>
<html lang="en" ng-app="ionicApp">
<head>
    <meta charset="UTF-8">
    <title>功能集合小测试</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="lib/css/ionic.css">)
    <script src="lib/js/ionic.bundle.min.js"></script>

// 上面是ionic的配置文件
</head>
<body>


<ion-nav-view>
</ion-nav-view>

<script src="js/app.js"></script>

//自己写的app.js配置文件
</body>
</html>

二. 然后书写底部导航页和配置多重路由

2.1 底部导航以及路由html写法，如下：


<ion-tabs class="tabs-icon-only tabs-icon-top">

    <ion-tab title="首页" icon-on="ion-home" icon-off="ion-home" ui-sref="tabs.home">
        <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="到位" icon="ion-ios-information" ui-sref="tabs.daowei" >
        <ion-nav-view name="daowei-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="社群" icon="ion-ios-information" href="#/tab/about">
        <ion-nav-view name="shequn-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="我的" icon="ion-ios-information" href="#/tab/about">
        <ion-nav-view name="wode-tab"></ion-nav-view>
    </ion-tab>

</ion-tabs>

2.2 然后是app.js配置路由以及切换的页面状态，如下：

angular.module('ionicApp',['ionic'])

    .config(["$stateProvider","$urlRouterProvider","$ionicConfigProvider",
        function ($stateProvider,$urlRouterProvider,$ionicConfigProvider) {
        //解决安卓机底部tabs上移问题
            $ionicConfigProvider.platform.ios.tabs.style('standard');
            $ionicConfigProvider.platform.ios.tabs.position('bottom');
            $ionicConfigProvider.platform.android.tabs.style('standard');
            $ionicConfigProvider.platform.android.tabs.position('standard');

            $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
            $ionicConfigProvider.platform.android.navBar.alignTitle('left');

            $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
            $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');

            $ionicConfigProvider.platform.ios.views.transition('ios');
            $ionicConfigProvider.platform.android.views.transition('android');

        //路由状态
            $urlRouterProvider.otherwise("/tab/home");
            $stateProvider
                .state("tabs",{
                    url:"/tab",
                    abstract:true,
                    templateUrl:"views/tabs.html"
                })
                /*tabs.home底部页面*/
                .state("tabs.home",{
                    url:"/home",
                    views:{
                        "home-tab":{
                            templateUrl:"views/home.html"
                        }
                    }
                })
                /*tabs.home底部页面的子页面 1*/
                .state("tabs.home-tab",{
                    url:"/home-tab",
                    views:{
                        "home-tab":{
                            templateUrl:"views/home-tab.html"
                        }
                    }
                })
                /*tabs.home底部页面的子页面 2*/
                .state("tabs.home-tab1",{
                    url:"/home-tab1",
                    views:{
                        "home-tab":{
                            templateUrl:"views/home-tab1.html"
                        }
                    }
                })
                /*tabs.daowei底部页面*/
                .state("tabs.daowei",{
                    url:"/daowei",
                    views:{
                        "daowei-tab":{
                            templateUrl:"views/daowei.html"
                        }
                    }
                })
                /*tabs.daowei底部页面的子页面 1*/
                .state("tabs.daowei-tab",{
                    url:"/daowei-tab",
                    views:{
                        "daowei-tab":{
                            templateUrl:"views/daowei-tab.html"
                        }
                    }
                })
        }])

三.路由父页面内页跳转回父页面时出现返回按钮的解决方法，如下：

<ion-view view-title="首页">
    <ion-nav-bar class="bar-positive">
        
        
    </ion-nav-bar>
    <ion-content>
        <p><a ui-sref="tabs.home-tab">这是首页</a></p>
    </ion-content>

</ion-view>

此为app.js下设置好的默认显示页面，也就是所谓的首页

它的子页面如下，可以比对一下：

<ion-view view-title="首页">
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>返回</ion-nav-back-button>
    </ion-nav-bar>
    <ion-content>
        <p><a ui-sref="tabs.home-tab1">我是首页的第一个内页</a>为什么继承不了home.html的返回按钮啊</p>
    </ion-content>

</ion-view>