【ionic+angulajs】ion-tabs訪問頁面url不記錄歷史的方法(修改瀏覽器記錄的歷史url,改變goback的跳轉)

基於微信公衆號開發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歷史棧的比較如下:


以上,請大家糾正或討論,謝謝!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章