NO IMAGE

做現在的MVVM的單頁面前端專案,一般只要把整個頁面的生命週期函式理順了就得心應手了,下面是ionic的生命週期事件:

截至ionic 3.8.0版本,框架提供了8個鉤子函式,它們分別會在頁面生命週期的各個階段被觸發,我們來簡單瞭解一下。

  1. // 頁面被載入完成後呼叫的函式,切換頁面時並不會進行重新載入,因為有cache的存在  
  2. onPageLoaded() {  
  3.   console.log(‘page 1: page loaded.’);  
  4. }  
  5.   
  6. // 頁面即將進入的時候  
  7. onPageWillEnter() {  
  8.   // 在這裡可以做頁面初始化的一些事情  
  9.   console.log(‘page 1: page will enter.’);  
  10. }  
  11.   
  12. // 頁面已經進入的時候  
  13. onPageDidEnter() {  
  14.   console.log(‘page 1: page did enter.’);  
  15. }  
  16.   
  17. // 頁面即將離開的時候  
  18. onPageWillLeave() {  
  19.   console.log(‘page 1: page will leave.’);  
  20. }  
  21.   
  22. // 頁面已經離開的時候  
  23. onPageDidLeave() {  
  24.   console.log(‘page 1: page did leave.’);  
  25. }  
  26.   
  27. // 從 DOM 中移除的時候執行的生命週期  
  28. onPageWillUnload() {  
  29.   
  30. }  
  31.   
  32. // 從 DOM 中移除執行完成的時候  
  33. onPageDidUnload() {  
  34.   
  35. }  

上面介紹了6個。這6個鉤子有個共性,它們的返回值都是void,即在相應時刻呼叫,不會返回任何的資訊。

而另外兩個鉤子有些不太一樣,它們是可以返回布林值的ionViewCanEnter和ionViewCanLeave。

//字面理解能進入
  ionViewCanEnter() :boolean {
if(new Date().getHours()>=9){
console.log('時間到了,上班了!');
return false;
}
return true;
}
//字面理解能離開
  ionViewCanLeave() :boolean {
if(new Date().getHours()>=18){
console.log('時間到了,可以下班了!');
return false;
}
return true;
}