A brief analysis of the solution to the problem of textarea penetration that is too high in mini programs

How to solve the problem of excessive textarea level penetration in the mini program? The following article will introduce to you how the WeChat applet solves the problem of excessive textarea level penetration through cover-view. I hope it will be helpful to you!

Since I started making small programs, I have encountered many pitfalls. One of them is that the textarea level is too high and will penetrate other levels. At this time, using z-index will not work. of. This is what the official said: >In order to optimize the experience of the mini program framework, some components such as map, video, textarea, and canvas are implemented through native controls. The level of native components is higher than that of front-end components. In order to cover the native components normally, a cover-view is designed.

So you can use cover-view, but there are many pitfalls when using cover-view, which results in the use of cover-view not working or the components in cover-view not being displayed. , next I will describe the solution I have implemented, hoping to help everyone. My requirement here is to have a submit button at the bottom, but the textarea above will penetrate through the submit button, which makes the experience very bad. [Related learning recommendations: 小program development tutorial]

I wrote it here at the beginning:

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

I also read a lot of blog posts saying These photo machines did not display it, and it was the same on my side. Only later did I discover the error message.

Later I changed the code to this:

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

But it still doesn’t display: by adding cover-view After debugging the background color, I found that the cover-view is not as high as:

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

So I need to add styles to the cover-view....

Summarize: If the code in your cover-view is not displayed 1. Check if you are using view; the view component will not be displayed on the real machine; 2. Even if cover-view is used, z-index; and other styles need to be added to cover-view.

If your code still does not display, you can first add a background color, height, and width to the cover-view to debug whether the cover-view does not display. Then check whether your code is displayed in cover-view, and debug it layer by layer to see where the cause is.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of A brief analysis of the solution to the problem of textarea penetration that is too high in mini programs. For more information, please follow other related articles on the PHP Chinese website!