ionic状态改变时动态（强制）刷新页面

最新推荐文章于 2021-06-04 00:39:12 发布

幸福的雏

最新推荐文章于 2021-06-04 00:39:12 发布

阅读量1.8w

点赞数 2

分类专栏： ionic 文章标签： ionic 路由状态state改变动态刷新页面

本文链接：https://blog.csdn.net/haozhoupan/article/details/50378636

版权

本文介绍了在Ionic应用中，如何在状态改变时强制刷新页面以获取最新数据。通过设置$state.go的reload参数和$stateProvider的cache属性，以及动态调整$http请求的cache，实现特定场景下的页面刷新。在某些情况下，{reload: true}并未生效，而将$state和$http的cache都设为false虽能解决问题，但可能导致性能下降。最终提出了一种动态设置$http缓存的方法，根据路由参数决定是否从后台获取数据，以提高用户体验。

摘要由CSDN通过智能技术生成

$state.go(stateName,params,config);使用这个方法调到某个状态后，有时需要强制刷新当前页面，使其向后台发起请求，获取最新数据。

1.这种需求的场景举例：

这是处于待办状态（没有被评价的工作记录处于待办状态）的工作记录。

注意：此时待办的工作记录数为45132条

当点击其中一条记录

然后点击评价工作记录对其进行评价

点击评价按钮，评价当前工作记录

评价完成之后，状态就需要跳转至初始页面，并且强制刷新页面，从后台获取数据。

注意：此时待办的工作记录数为45131条，说明刷新成功。

2.实现方式

2.1{reload:true}

强制刷新页面网上资料说使用$state.go("tab.backlog",{},{reload:true})，其中{reload:true}的配置可以实现强制刷新，但是经过我的实验之后发现没有起任何作用。

2.2cache:false

$statePrivider.state({})这个方法中的参数是对象，其中有项属性配置是cache:true/false, ，默认为true。在此，将其配置为false,此时，这个状态就不会有缓存，也就可以实现每次处于该状态时刷新页面，也就相当于实现了强制刷新。(注意：需要继续向下看，很可能此时你任然看不到页面数据被刷新)

如果页面数据是通过$http从后台使用ajax获取的数据，那么页面数据任然得不到刷新。

findPendentRecordList:function(postParams){
    var url =Config.basePath+this.tableName+"/findPendentRecordList.do?callback=JSON_CALLBACK";
    return $http.jsonp(url,{
 params:postParams});
},