关于ionic跳转黑屏问题

关于ionic跳转的时候黑屏我在做项目的时候发现了，一直没时间去解决，今天正好有空把它搞定了，分享一下给大家。

黑屏原因我给人理解是缺少一个父容器背景去包裹我们的目标页面，所以在尚未加载到目标页面的时候就显示黑屏。

我的解决方案是添加父容器。如果大家指导ionic的tabs就应该知道什么是父容器了。

第一步：创建一个父容器页面 parent.html,内容：<div ui-view=""/>，创建三个子页面page1.html，page2.html，page3.html内容随意，区分开即可。

第二步：创建app.js

var  myApp = angular.module( "myApp" , ['ui.router']);

myApp.config( function  ($stateProvider, $urlRouterProvider) {

     $urlRouterProvider.when( "" ,  "/Tabs" );

     $stateProvider
        .state( "Tabs" , {
            url:  "/Tabs" ,
            templateUrl:  "parent.html"

        })
        .state( "Tabs.Page1" , {
            url: "/Page1" ,
            templateUrl:  "page1.html"
        })
        .state( "Tabs.Page2" , {
            url: "/Page2" ,
            templateUrl:  "page2.html"
        })
        .state( "Tabs.Page3" , {
            url: "/Page3" ,
            templateUrl:  "page3.html"
        });
});

就这样搞定了，这样在page1到page3之间跳转就不会黑屏了。

但是如果是如下配置就会出现黑屏的。

var  myApp = angular.module( "myApp" , ['ui.router']);

myApp.config( function  ($stateProvider, $urlRouterProvider) {

     $urlRouterProvider.when( "" ,  "/Page1" );

     $stateProvider
        .state( "Page1" , {
            url: "/Page1" ,
            templateUrl:  "page1.html"
        })
        .state( "Page2" , {
            url: "/Page2" ,
            templateUrl:  "page2.html"
        })
        .state( "Page3" , {
            url: "/Page3" ,
            templateUrl:  "page3.html"
        });
});

如果有需要源码的请联系我QQ:940417907