Introduction à la méthode de création d'éléments qui occupent le plein écran dans le développement WeChat

Cet article présente principalement les informations pertinentes sur la façon de faire en sorte que les éléments occupent toute la hauteur de l'écran dans l'applet WeChat. Les amis dans le besoin peuvent se référer à

Faire en sorte que les éléments occupent toute la hauteur de l'écran dans. la méthode d'implémentation de la hauteur d'écran de l'applet WeChat

Dans les projets, un élément conteneur est souvent utilisé pour remplir la hauteur et la largeur de l'écran, puis d'autres éléments sont placés dans cet élément conteneur.

La largeur est simplement largeur:100%

Mais qu'en est-il de la hauteur, ce que nous savons, c'est la hauteur :100% doit être utilisé lorsque la hauteur de l'élément parent est donnée.

Mon approche précédente consistait à utiliser js pour obtenir la hauteur de l'écran, puis à l'attribuer à la hauteur

La hauteur de l'écran dans la page Web est :window.innerHeight ;

Dans l'applet WeChat, vous devez appeler wx.getSystemInfointerface, puis attribuer la valeur via setData

Mais évidemment via js, ce n'est certainement pas aussi efficace que CSS donnant directement des styles.

Nous utilisons donc une autre méthode :

Définissez body,html{height:100%} dans la page Web ;

Définissez body et html Set à 100% afin que nous puissions utiliser height:100% dans leurs éléments enfants pour que nos éléments conteneurs occupent toute la hauteur de l'écran.

Mais dans l'applet WeChat, il n'y a pas d'

objet dom, mais quand on regarde l'outil de débogage, on peut voir l'arbre dom (je ne sais comment l'appeler), appelons-le ainsi), le nœud racine est page, alors essayons d'utiliser page{height:100%}

Bien sûr, c'est faisable. La hauteur remplit toute la fenêtre de l'applet.

Je peux donc continuer avec plaisir à écrire mon petit programme.

[Recommandations associées]

1.

Téléchargement du code source de la plateforme de compte public WeChat

2

Téléchargement du code source du système de commande Alizi

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!