1. 程式人生 > >ionic 3 常用集-持續更新

ionic 3 常用集-持續更新

1.隱藏返回鍵

<ion-header>
  <ion-navbar [hideBackButton]="true">
    <ion-buttons start>
      <button ion-button icon-only color="light">
取消
      </button>
    </ion-buttons>
    <ion-title>{{navParams.data.title}}</ion-title>
    <ion-buttons end>
      <button 
ion-button icon-only color="light" > 編輯 </button> </ion-buttons> </ion-navbar> </ion-header>

2.ionic2/3 頁面預設滾動到底部兩種方法:

方法1體驗不是很好,200毫秒的延遲視覺上可以看出來

方法2非同步的請求有時候不能及時響應(可以請求第一次後存入本地儲存裡面),經過測試 雖然ionic3 中本地儲存也是非同步的,但是毫無延遲(可能是比較快)

推薦1+2一起使用

1.使用 content 元件的 scrollToBottom() 方法,可以封裝成函式使用:


//頁面滾動到底部  
scrollToBottom() {
  setTimeout(() => {
    if(this.content.scrollToBottom){
      this.content.scrollToBottom(0);
}
  },200)
}

2..使用 content 元件的 scrollDownOnLoad 屬性:

<ion-content scrollDownOnLoad="true"></ion-content>