Eine kurze Analyse der Lösung des Problems der zu hohen Textfelddurchdringung in Miniprogrammen

Wie kann das Problem der Textfeldebenendurchdringung im Miniprogramm gelöst werden? Der folgende Artikel stellt Ihnen vor, wie das WeChat-Applet das Problem der übermäßigen Durchdringung von Textbereichsebenen durch Cover-View löst. Ich hoffe, er wird Ihnen hilfreich sein!

Seit ich angefangen habe, kleine Programme zu erstellen, bin ich auf viele Fallstricke gestoßen. Eine davon ist, dass die Textbereichsebene zu hoch ist und andere Ebenen durchdringt. Das sagte der Beamte: >Um das Erlebnis des Miniprogramm-Frameworks zu optimieren, werden einige Komponenten wie Karte, Video, Textbereich und Canvas über native Steuerelemente implementiert Um die nativen Komponenten normal abzudecken, wird eine Cover-Ansicht entworfen.

Es reicht also aus, die Cover-Ansicht zu verwenden, aber es gibt viele Fallstricke bei der Verwendung der Cover-Ansicht, die dazu führen, dass die Verwendung der Cover-Ansicht nicht funktioniert oder die Komponenten in der Cover-Ansicht nicht angezeigt werden. Als nächstes beschreibe ich nur das Ich hoffe, dass die Lösung, die ich implementiert habe, allen helfen kann. Meine Anforderung hier ist, unten eine Schaltfläche zum Senden zu haben, aber der Textbereich oben dringt durch die Schaltfläche zum Senden ein, was das Erlebnis sehr schlecht macht. [Verwandte Lernempfehlungen: Mini-Tutorial zur Programmentwicklung]

Ich habe es hier am Anfang geschrieben:

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

Ich habe auch viele Blog-Beiträge gelesen, in denen es hieß, dass diese Fotomaschinen nicht angezeigt werden, und das Gleiche gilt auch für Ich habe es später herausgefunden. Fehlermeldung.

Später habe ich den Code wie folgt geändert:

<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;
}

Aber es wird immer noch nicht angezeigt: Durch das Hinzufügen einer Hintergrundfarbe zur Cover-Ansicht zum Debuggen habe ich festgestellt, dass die Cover-Ansicht keine hat hochwertige Version:

:

<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;
}

Also müssen wir der Coveransicht Stile hinzufügen....

Zusammenfassung: Wenn der Code in Ihrer Cover-Ansicht nicht angezeigt wird 1. Überprüfen Sie, ob die Ansichtskomponente auf dem realen Computer angezeigt wird. 2. Auch wenn die Cover-Ansicht verwendet wird, müssen Z-Index und andere Stile zur Cover-Ansicht hinzugefügt werden.

Wenn Ihr Code immer noch nicht angezeigt wird, können Sie zunächst eine Hintergrundfarbe, Höhe und Breite zur Cover-Ansicht hinzufügen, um zu debuggen, ob die Cover-Ansicht nicht angezeigt wird. Überprüfen Sie dann weiterhin, ob Ihr Code in der Cover-Ansicht angezeigt wird, und debuggen Sie ihn Schicht für Schicht, um festzustellen, wo die Ursache liegt.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Lösung des Problems der zu hohen Textfelddurchdringung in Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!