Une brève analyse de la solution au problème de la pénétration excessive du niveau de zone de texte dans les mini-programmes

Comment résoudre le problème de pénétration au niveau de la zone de texte dans le mini programme ? L'article suivant vous présentera comment l'applet WeChat résout le problème de pénétration excessive au niveau de la zone de texte via la vue de couverture. J'espère que cela vous sera utile !

Depuis que j'ai commencé à créer de petits programmes, j'ai rencontré de nombreux pièges. L'un d'eux est que le niveau de la zone de texte est trop élevé et va pénétrer dans d'autres niveaux. Pour le moment, l'utilisation de z-index ne fonctionnera pas. Voici ce qu'a dit le responsable : >Afin d'optimiser l'expérience du framework du mini-programme, certains composants tels que la carte, la vidéo, la zone de texte et le canevas sont implémentés via des contrôles natifs. Le niveau des composants natifs est supérieur à celui des composants frontaux. couvrent normalement les composants natifs, une vue de couverture est conçue.

Il suffit donc d'utiliser cover-view, mais il existe de nombreux pièges lors de l'utilisation de cover-view, ce qui fait que l'utilisation de cover-view ne fonctionne pas ou que les composants de cover-view ne sont pas affichés. Ensuite, je décris simplement le. solution que j’ai mise en œuvre, j’espère qu’elle pourra aider tout le monde. Mon exigence ici est d'avoir un bouton de soumission en bas, mais la zone de texte ci-dessus pénétrera à travers le bouton de soumission, ce qui rend l'expérience très mauvaise. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]

Je l'ai écrit ici au début :

<cover-view><view>提交</view></cover-view>

J'ai aussi lu beaucoup d'articles de blog disant que ces machines photo ne s'affichent pas, et c'était la même chose pour moi, et je l'ai découvert plus tard.

Plus tard, j'ai changé le code en ceci :

<cover-view>
	<button>提交</button>
</cover-view>
// 样式
button{
	position: fixed;
	bottom: 0rpx;
	margin: auto;
	width: 100%;
	height: 37px;
	background-color: #0090FF;
	color: #FFFFFF;
	font-size: 34rpx;
	line-height: 37px;
	text-align: center;
}

Mais il ne s'affiche toujours pas : en ajoutant une couleur d'arrière-plan à la vue de couverture pour le débogage, j'ai constaté que la vue de couverture n'avait pas de version de haute qualité :

 :

<cover-view>
	<button>提交</button>
</cover-view>
// 样式
button{
	position: fixed;
	bottom: 0rpx;
	margin: auto;
	width: 100%;
	height: 37px;
	background-color: #0090FF;
	color: #FFFFFF;
	font-size: 34rpx;
	line-height: 37px;
	text-align: center;
}
cover-view{
	height: 37px;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 9999;
}

Nous devons donc ajouter des styles à la vue de couverture....

Résumé : Si le code dans votre vue de couverture ne s'affiche pas 1. Vérifiez si vous utilisez la vue ; le composant de vue ne sera pas affiché sur la machine réelle ; 2. Même si la vue de couverture est utilisée, le z-index et d'autres styles doivent être ajoutés à la vue de couverture.

Si votre code ne s'affiche toujours pas, vous pouvez d'abord ajouter une couleur d'arrière-plan, une hauteur et une largeur à la vue de couverture pour déboguer si la vue de couverture ne s'affiche pas. Continuez ensuite à vérifier si votre code est affiché en vue de couverture et déboguez-le couche par couche pour voir où en est la cause.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

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!