基於微信公衆號開發ionic+angularjs頁面,跳轉時頁面的url都會被記錄下來。點擊微信的返回按鈕(或手機的返回健)即瀏覽器的返回,頁面會按照記錄的歷史依次返回。
選項卡的功能經常在頁面中使用,使用選項卡的頁面針對用戶來說還是單個頁面。如圖頁面A:
<ion-tabs>
<ion-tab title="tab0" href="#/test/tab0">
<ion-nav-view name="tabName0"></ion-nav-view>
</ion-tab>
<ion-tab title="tab1" href="#/test/tab1">
<ion-nav-view name="tabName1"></ion-nav-view>
</ion-tab>
<ion-tab title="tab2" href="#/test/tab2">
<ion-nav-view name="tabName2"></ion-nav-view>
</ion-tab>
</ion-tabs>
每個<ion-tab/>對應一個單獨的頁面可以並行開發,配置好頁面的路由(state)即可。因爲每個<ion-tab/>在點擊時對應的地址都會記錄到歷史中,點擊微信的返回按鈕(或手機的返回健)時體驗就不那麼好了。比如:
從頁面S跳轉到頁面A,在頁面A(默認顯示tab0)中分別點擊選項卡tab1、tab2、tab0、tab1後點擊微信的返回按鈕(或手機的返回健)時並不是直接從頁面A返回到頁面S,而是連續點擊時頁面返回依次是tab0、tab2、tab1、tab0、頁面S。
若要解決點擊一次返回即可從頁面A返回頁面S的方式:改變<ion-tab/>默認的點擊事件,自定義並綁定ng-click,即:
<ion-tabs>
<ion-tab title="tab0" ng-click="test(0)">
<ion-nav-view name="tabName0"></ion-nav-view>
</ion-tab>
<ion-tab title="tab1" ng-click="test(1)">
<ion-nav-view name="tabName1"></ion-nav-view>
</ion-tab>
<ion-tab title="tab2" ng-click="test(2)">
<ion-nav-view name="tabName2"></ion-nav-view>
</ion-tab>
</ion-tabs>
controller中定義test:
$scope.test=function(index) {
//自定義事件需要使用$ionicTabsDelegate.select()來選中指定選項卡
$ionicTabsDelegate.select(index);
if(index==0) {
$state.go('pageA.tab0', null, {location:'replace'});
} else if(index==1) {
$state.go('pageA.tab1', null, {location:'replace'});
} else if(index==2) {
$state.go('pageA.tab2', null, {location:'replace'});
}
}
$state.go的第三個參數:location:'replace'表示用當前url替換上一個歷史url,這樣保證url歷史棧中的個數不變,最上層url是當前url
詳細參照:https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options
修改後按照上述的方式順序訪問後,url歷史棧的比較如下:
以上,請大家糾正或討論,謝謝!