Je veux créer une page de démarrage qui affichera le logo et apparaîtra pendant 2 secondes avant de montrer le contenu de l'application, quelqu'un peut-il me montrer la bonne façon de le faire? Merci !ionique 2/3: Créer une page de démarrage pour l'application
Répondre
Utilisez le composant écran de démarrage ionique natif:
Tout ce que vous devez faire est de créer une nouvelle page qui vous sera présenté comme le début de l'application et à l'intérieur de cette page que vous allez faire le code correspondant cela est nécessaire pour que l'application commence à fonctionner. Puisque je ne sais pas si vous utilisez des pages chargées paresseuses ou non, je vais laisser la création de page au point où vous pouvez utiliser pleinement cette page à vous.
Donc, dans votre CLI créer une nouvelle page avec ionic g page yourPage
Dans votre app.components.ts
vous aurez premier point à cette page créé
app.components.ts:
export class MyApp {
rootPage: any = 'YourPage'; // YOUR PAGE WILL BE THE ROOT PAGE FOR NOW
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
}
En votre page créée, vous ferez ce qui suit:
yourPage.ts:
constructor(public navCtrl: NavController){}
// USING A LIFECYCLE HOOK TO EXECUTE CODE AFTER THE PAGE IS FULLY LOADED
ionViewDidLoad(){
setTimeout(()=> {
// YOU'LL SET THE ROOT WITH THE HOME PAGE YOU NEED TO SHOW AFTER YOU START. DON'T PUSH THE PAGE SINCE YOU DON'T NEED THE USER TO NAVIGATE BACK TO IT.
// You can also do other relevant code here, like check if the user is logged or not before seting the root to the right page.
this.navCtrl.setRoot('YourMainHomePage');
}, 2000)
}
Un dans le code html yourPage vous aurez juste l'image:
yourPage.html
<!-- REMOVE HEADER -->
<ion-content padding>
<img src="path/to/image" alt="my company" />
</ion-content>
Hope this helps