问题点
- 在开发微信微官网的时候,会同时存在两个导航栏的情况:微信自带导航栏和WebApp内建导航栏。按照常理两者导航结果要同步才能达到体验一致的效果。
- ionic使用的导航方式永远都是在新增历史记录($ionicHistory.goBack(-1)),而浏览器原生的导航则是在历史记录中有前有后的跳转,因而使用$ionicHistory会在用户操作的过程出现导航不同步的现象。
- “返回”可以用history.go(-1)解决,但是“返回首页”的问题就有些棘手,因为返回首页的另一个意思就是,返回历史记录的第一个页面,如果第一个页面不是“home”,那就将第一个页面换成“home”。
解决方案
- 内建数组维护历史记录,监听$locationChangeSuccess事件,当path改变就对内建历史记录进行更新,东西不难拿笔画画流程就清楚了。
- 方法backToHome返回首页、goBack后退,HistoryArr维护历史记录。
- 上面两个方法挂载到mainCtrl根控制器的$rootScope下,这样的话在别的controller中也可手动调用此方法。
代码实现
angular.module('controllers')
.controller('mainCtrl', ['$scope', '$sessionStorage', '$state', '$ionicHistory', '$rootScope', '$log', '$timeout', '$window', '$location', function ($scope, $sessionStorage, $state, $ionicHistory, $rootScope, $log, $timeout, $window, $location) {
/**
* 定义后退和返回操作
* */
$rootScope.HistoryArr = [];
$rootScope.$on("$locationChangeSuccess", function () {
var currentPath = $location.path();
//倒数第一个
var back1Path = $rootScope.HistoryArr[$rootScope.HistoryArr.length-1];
//如果是后退的情况,则不记录历史记录
if($rootScope.HistoryArr.length>1){
//倒数第二个
var back2Path = $rootScope.HistoryArr[$rootScope.HistoryArr.length-2];
if(currentPath != back1Path){
if(currentPath != back2Path){
//前进状态
$rootScope.HistoryArr.push(currentPath);
}else{
//激活了浏览器的后退,这里只需要更新状态
$rootScope.HistoryArr.length = $rootScope.HistoryArr.length-1;
}
}else{
//当前状态就是数组的最后一个,这里不做处理
}
}else{
if(back1Path != currentPath){
$rootScope.HistoryArr.push(currentPath);
}
}
});
/**
* backToHome
* */
$rootScope.backToHome = function () {
var len = $rootScope.HistoryArr.length;
//截断
$rootScope.HistoryArr.length = 1;
//直接回到第一个页面,一定是主页
//如果不是home则转到home
//因为bug,无奈之举
if( $rootScope.HistoryArr[0] != "/home"){
$rootScope.HistoryArr.length = 0;
$location.path('/home');
}else{
$window.history.go(1 - len);
}
};
/**
* 定义上一个视图,受体在subNavPage.html
* */
$rootScope.goBack = function (step) {
!step && (step = 1);
step = parseInt(step);
if(isNaN(step)){
return "step must be a number";
}
//截断
$rootScope.HistoryArr.length = $rootScope.HistoryArr.length-step;
$window.history.go(-(step));
};
}]);