首页 > 学院 > 开发设计 > 正文

ionic---state路由

2019-11-06 09:53:12
字体:
来源:转载
供稿:网友

路由结构分析(tabs结构)

//tabs基础路由.state('tab', { url: '/tab', abstract: true, //设置为基础路由 templateUrl: 'templates/tabs.html' //也可以加控制器})//首页路由部分(一级).state('tab.index', { //用于state跳转,不可重复 url: '/index', //用于url跳转,或者$location.path('/tab/index'); views: { 'tab-index': { //将这个页面显示在tab路由下,与tab.html中name对应 templateUrl: 'templates/index/index.html', controller: 'indexCtrl' } }, cache:false //设置页面是否缓存})//未接单的订单详情页面(二级).state('tab.orderDetail', { url: '/index/orderDetail/:orderDetailNum', //可以传递参数 views: { 'tab-index': { templateUrl: 'templates/index/orderDetail.html', controller: 'orderDetailCtrl' } }, cache:false})

路由跳转的方式

url跳转<a class="button button-clear" href="#/tab/goods/addDesk" >添加</a> //普通<a href="#/tab/index/orderDetail/{{weixinOrder._id}}"> //传参控制器中$location.path()

$location说明http://www.angularjs.cn/A00M

$location.path('/tab/index');

控制器中$state.go() (推荐使用)

$state.go('tab.index', {}, { reload: true});

$state.go()跳转方式

传递参数//app.js中确定参数.state('tab.lemoneyCount', { url: '/le/lemoneyCount', params:{method:null,PRoductid:null,rate:null,uprate:null},//先确定参数名 views: { 'tab-le': { templateUrl: 'templates/money/moneyCount.html', controller: 'lemoneyCountCtrl' } }})//控制器中传递具体参数$state.go('tab.lemoneyCount', {method:aa,productid:bb,rate:cc,uprate:dd}, { reload: true //下个页面不缓存 配合路由中cache使用});//下个页面控制器接收参数.controller('leinvestRecordCtrl', function($stateParams) { var Params = $stateParams; var method = $stateParams.method;});

$ionicHistory路由历史记录

ionicHistory定义:当用户通过导航栏切换视图页面的时候,ionicHistory起到跟踪视图的作用,类似的浏览器的行为方式,一个ionic应用程序能够保持以前的视图,当前视图,和前视图(如果有一个)。然而,一个典型的Web浏览器只跟踪一个历史堆栈在一个线性的方式。不同于传统的浏览器环境中,应用程序和应用程序并行的独立的历史,如标签。如果一个用户在一个标签上浏览几页,然后切换到一个新的标签和回退,返回按钮与以前的标签,但到以前的页面访问在该标签。因为ionicHistory有利于并行历史架构。−varhistoryData=ionicHistory.viewHistory();

返回该应用程序的视图历史数据,如所有的视图和历史记录,以及它们如何在导航堆栈中一起有序和链接的方式 - var currentViewData=$ionicHistory.currentView()

返回当前视图数据 - var currentHistoryId = $ionicHistory.currentHistoryId()

返回历史堆栈的标识,它是当前视图的父容器 - var currentTitle = $ionicHistory.currentTitlt([val])

返回当前视图的标题 或者是设置当前视图的标题 - var backView = $ionicHistory.backView()

返回当前视图的前一个视图 - var backViewTitle = $ionicHistory.backViewTitle()

返回当前视图的前一个视图的标题 - var forwardView = $ionicHistory.forwardView()

返回当前视图后一个视图数据 (如果有) - var currentStateName = $ionicHistory.currentStateName()

返回当前视图的状态名称 如tab.sal - $ionicHistory.goBack([backCount])

导航到应用程序的返回视图(加入视图存在)backCount填写负数 - $ionicHistory.removeBackView()

移除当前视图的前一个视图,包括缓存元素和范围(如果它们存在的话)。 - $ionicHistory.clearHistory()

清除应用程序的整个历史,除了当前视图。 - var promise = $ionicHistory.clearCache(stateIds)

清除缓存,传入参数,stateIds是一个数组,清除缓存的列表

$ionicHistory.nextViewOptions({ disableAnimate: true, disableBack: true,historyRoot:true});

目前使用中的小问题

问题1

描述:当想从一个tab下的页面 跳到另外一个tab下的页面时,后退按钮不能显示。

暂时解决办法:在两个tab下都写这个页面的路由,公用页面控制器。

问题2

描述:后退按钮不能正常显示。

暂时解决办法:无


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表