ionic V3.10 開發踩坑集錦(二)

GitHub地址：https://github.com/JerryMissTom ，歡迎關注

這是ionic 開發踩坑的第二篇文章，第一篇參見：ionic V3.10 開發踩坑集錦（一），開發環境與上文保持一致。

內容如下：

通過 ionic cordova run android 安裝在手機上的APP，執行 window.open(url) 這段程式碼時不會跳轉到本機自帶的瀏覽器執行。但是通過 ionic cordova build android -prod 打包出來的APP執行此段程式碼，會跳轉至本機自帶的瀏覽器
在css檔案和html檔案引入assets中圖片的路徑設定如下：

   xx.scss
 .header {
        background: url("../assets/images/xxx.png") 
    }
複製程式碼

xxx.html
 <img  src="assets/images/xxx.png">
複製程式碼

這是因為最後打包出來的assets資料夾和index.html在一級，與包含main.css的build在一級

TimePicker 彈出來的日期選擇器時間顯示有問題，在app.scss中新增如下程式碼即可：

.picker-ios .picker-opt{
  height: 45px; //大小自己除錯
}
複製程式碼

ionic page 的生命週期中常用的兩個是 ionViewDidLoad 和 ionViewDidEnter ，他們之間有區別的。ionViewDidLoad 只在頁面建立的時候被觸發一次，當頁面建立後通過 NavController.push() 跳轉至其他頁面，然後再通過 NavController.pop() 跳轉回來，此方法不會被觸發，建議只在此方法中執行頁面初始化的操作。而 ionViewDidEnter 每次都會在頁面顯示的時候被觸發，不管這個介面是否被cache。當業務要求每次進入某頁面都執行同樣操作時，需要在 ionViewDidEnter 寫邏輯操作。
實現頁面頭部保持不動的方法，適配 Android 和 iOS。頁面示意圖如下，main中的list向上滑動時，header的位置保持不動，固定在頭部。：

html程式碼如下：

<ion-header>
    <ion-navbar>
        <ion-title>
            title
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content>

    <div [class.ios-list-header]="version==='ios'" [class.android-list-header]="version==='android'">
    header
    </div>
        
    <div [class.android-list-content-top]="version==='android'">
     main/list  
    </div>

</ion-content>
複製程式碼

ts檔案獲取平臺的程式碼如下：

import { Platform } from 'ionic-angular';

private version：string；
constructor(private platform: Platform) {
    if (this.platform.is('android')) {
            this.version = 'android';
        }
    else if (this.platform.is('ios')) {
            this.version= 'ios';
        }
}
複製程式碼

scss檔案如下：

.ios-list-header {
  width: 100%;
  height: 80px;
  position: sticky;
  z-index: 1;
  top: 0;
}

.android-list-header {
  width: 100%;
  height: 80px;
  position: fixed;
  z-index: 1;
  top: 54px;
}

.android-list-content-top {
  margin-top: 80px !important;
}
複製程式碼

ion-header 標籤無論在哪個平臺都是固定在最上面的。但是在 ion-content中固定頭部內容， iOS 直接使用 sticky就可以了，由於 Chrome 不支援這個屬性，所以我們使用 fixed 來代替，同時還要設定 main 至頭部的距離，以免被 header 遮擋住。

ionic V3.10 開發踩坑集錦(二)

推薦

相關文章