Analisis ringkas penyelesaian kepada masalah penembusan tahap textarea yang berlebihan dalam program mini

Bagaimana untuk menyelesaikan masalah penembusan tahap textarea dalam program mini? Artikel berikut akan memperkenalkan kepada anda bagaimana applet WeChat menyelesaikan masalah penembusan tahap kawasan teks yang berlebihan melalui paparan muka depan. Saya harap ia akan membantu anda!

Sejak saya mula membuat program kecil, saya telah menghadapi banyak masalah Salah satunya ialah tahap kawasan teks terlalu tinggi dan akan menembusi tahap lain, menggunakan z-index tidak akan berfungsi. Inilah yang dikatakan pegawai itu: >Untuk mengoptimumkan pengalaman rangka kerja program mini, beberapa komponen seperti peta, video, kawasan teks dan kanvas dilaksanakan melalui kawalan asli Tahap komponen asli adalah lebih tinggi daripada komponen bahagian hadapan meliputi komponen asli seperti biasa, paparan penutup direka bentuk.

Jadi tidak mengapa untuk menggunakan paparan penutup, tetapi terdapat banyak masalah apabila menggunakan paparan penutup, yang mengakibatkan penggunaan paparan penutup tidak berfungsi atau komponen dalam paparan penutup tidak dipaparkan, seterusnya Saya akan menerangkan penyelesaian yang telah saya laksanakan, dengan harapan dapat membantu semua orang. Keperluan saya di sini adalah untuk mempunyai butang hantar di bahagian bawah, tetapi kawasan teks di atas akan menembusi melalui butang hantar, yang menjadikan pengalaman itu sangat teruk. [Cadangan pembelajaran berkaitan: Tutorial pembangunan program mini]

Saya menulisnya di sini pada permulaan:

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

Saya juga banyak membaca Siaran blog mengatakan bahawa pencetak foto ini tidak memaparkannya, dan ia adalah sama di sisi saya Hanya kemudian saya menemui mesej ralat.

Kemudian saya menukar kod kepada ini:

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

Tetapi ia masih tidak dipaparkan: dengan memberikan perlindungan- Selepas menyahpepijat warna latar belakang paparan, saya mendapati bahawa paparan penutup tidak setinggi:

Versi yang baik ialah:

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

, jadi saya perlu menambah gaya pada paparan muka depan. ...

Ringkasan: Jika kod dalam paparan kulit anda tidak dipaparkan 1. Semak jika anda menggunakan paparan komponen paparan tidak akan dipaparkan pada mesin sebenar; 2. Walaupun paparan kulit digunakan, indeks z dan gaya lain perlu ditambah pada paparan kulit.

Jika kod anda masih tidak dipaparkan, anda boleh menambah warna latar belakang, ketinggian dan lebar pada paparan kulit untuk menyahpepijat sama ada paparan kulit tidak dipaparkan. Kemudian teruskan menyemak sama ada kod anda dipaparkan dalam paparan kulit dan nyahpepijatnya lapisan demi lapisan untuk melihat di mana puncanya.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Analisis ringkas penyelesaian kepada masalah penembusan tahap textarea yang berlebihan dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!