ionic中定義路由的問題


最近做一個ionic的app項目,發現ionic的路由方式並不是很靈活。期間在路由跳轉上遇到了很多的問題,這里直接上問題:

1、   在這個app中,我要實現除了首頁、分類頁、購物車、個人中心這4個頁面有tabs外,其它頁面都不要tabs。如何實現?

這個很簡單啊,在其它頁面中隱藏掉tabs就行了。在路由中定義一個$rootscope.hideTabs變量,通過設置其值為true或false來控制是否隱藏tabs,但是這種方式很繁瑣,要在沒個view對應的contraller中都設置一遍值,而且使用全局變量並不是什么好事,所以這里我使用了另一種方法,就是除這4個頁面繼承tab路由外,其它的頁面都不繼承tab,下面是我的路由定義:

這樣的話,其它頁面中都不會有tabs了,你以為大功告成了?接下來你還是會遇到一系列讓人頭痛的問題,那么我們現在來看看:

首先,我們點擊首頁商品列表中的一個商品進入商品詳情頁,   我靠,我明明在index.html中定義了<ion-nav-back-button></ion-nav-back-button>的,怎么沒有返回鍵?這樣我要怎么返回首頁?哈哈,因為你的首頁跟商品詳情頁不在同一個<ion-nav-view></ion-nav-view>中啊,根據ionic對路由的設置,不在同一<ion-nav-view></ion-nav-view>下的頁面是不能共享歷史記錄的。在view中加個自定義組件如何?

<ion-nav-buttons side="left">
<a href="javascript:history.back(-1)" class="button button-icon icon ion-ios-arrow-thin-left" nav-direction="back"></a>
</ion-nav-buttons>

誒,這樣好像行了,但是如果你還結合使用了<ion-nav-back-button>的話,還是會存在問題的,這里不想說了,有興趣的朋友可以自己實踐實踐,而我要講的是另一種做法:
同樣是定制私有組件,不過這種方法是通過傳參數進行跳轉的。
<ion-nav-buttons side="left">
<a class="button button-icon icon ion-ios-arrow-thin-left" ng-click="backNav()"></a>
</ion-nav-buttons>

在上一個頁面跳轉的時候傳遞一個參數:
$state.go('detail', {'id': id,'back':'tab.home'});
$scope.backNav = function() {
console.log($scope.historyBack);
$ionicViewSwitcher.nextDirection('back');
$state.go($stateParams.back);
};
這種方法很好的解決了在不同ion-nav-view中返回上一歷史的問題,不管你是從首頁跳到詳情頁還是從購物車跳到詳情頁,只要傳的參數值不同,就能返回到相應的頁面去。不過這種方法還是有缺點的,就是比較繁瑣,每次都要傳個參數。希望以后會有更好的解決方法。



 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM