一、准备工作
框架:angularjs
ui组件库:ionic1
二、页面缓存cache
路由设置cache参数,true为缓存,false为不缓存,代码如下:
angular.module('app',["AppCtrl"]) //依赖注入AppCtrl控制器module
.config(function($stateProvider){
$stateProvider
.state("home",{
url:"/home", //定义路由的名称
templateUrl:"./home.html", //html视图相对路径
controller:"AppCtrl", //定义视图对应对的控制,需要注入
cache:true //设置缓存,true为页面缓存,false不缓存
})
})
三、动态刷新
使用ionic组件ion-view的生命周期来跳过缓存,达到动态刷新的效果(页面使用ion-view容器)
可以通过设置一个全局变量(定义的方式很多,也可以设置一个sessionStorage来充当变量),然后if语句来判断是否执行enter钩子里面的代码。
$scope.$on('$ionicView.enter', function() {
//每次进入页面都会执行enter钩子
});
ion-view还有很多的钩子方法:
$ionicView.beforeEnter
$ionicView.enter
$ionicView.afterEnter
$ionicView.beforeLeave
$ionicView.leave
$ionicView.afterLeave
$ionicView.unloaded
合理的使用就能达到很多我们需要的效果。 |