Making address: https://github.com/JerryMissTom, welcome to attention

This is the second article in the history of ionic development. See Ionic V3.10 Development Hiccup collection (I) for the first article.

As follows:

  1. Ionic Cordova Run Android APP, Windows. Open (URL) is executed without switching to the native browser. Ionic Cordova build Android-Prod APP redirects you to the native browser

  2. Set the path for importing images from assets in CSS files and HTML files as follows:

   xx.scss
 .header {
        background: url(".. /assets/images/xxx.png")}Copy the code
xxx.html
 <img  src="assets/images/xxx.png">
Copy the code

This is because the last assets folder and index.html to be packaged are at level one, along with the build containing main.css

  1. TimePicker pops up the date picker time display with a problem inapp.scssAdd the following code to:
.picker-ios .picker-opt{ height: 45px; }}Copy the code

  1. IonViewDidLoad and ionViewDidEnter are the two most commonly used in the ionic Page lifecycle, and there are differences between them. IonViewDidLoad is triggered only once when the page is created. This method is not triggered when the page is created by jumping to another page via navController.push () and back again via navController.pop (). It is recommended that you perform page initialization only in this method. IonViewDidEnter is triggered every time the page is displayed, regardless of whether the interface is cached or not. If you need to perform the same operation every time you enter a page, write logical operations in ionViewDidEnter.

  2. Implement the page head to keep the method, adapt Android and iOS. The page diagram is shown below. When the list in Main slides up, the position of the header remains fixed at the head. :

The HTML code is as follows:

<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>
Copy the code

The code of ts file acquisition platform is as follows:

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'; }}Copy the code

SCSS files are as follows:

.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; }Copy the code

The ion-header tag is fixed to the top regardless of platform. However, in ion-content, iOS can simply use sticky header. Since Chrome does not support this property, we use fixed instead, and also set the distance between main and header to avoid being covered by header.

recommended

Last but not least, I would like to refer to ionic projects for beginners