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

转载于:https://my.oschina.net/u/1183930/blog/638274