關於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