关于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