小程序中怎么解決textarea層級(jí)過(guò)高穿透問(wèn)題？下面本篇文章給大家介紹一下微信小程序通過(guò)cover-view解決textarea層級(jí)過(guò)高穿透問(wèn)題的方法，希望對(duì)大家有所幫助！

自從做小程序以來(lái)，就遇到了好多坑，其中一個(gè)就是textarea層級(jí)過(guò)高，會(huì)穿透其他層次，這時(shí)候用z-index也是不管用的。 官方是這么說(shuō)的： >小程序框架為了優(yōu)化體驗(yàn)，部分組件如map、video、textarea、canvas通過(guò)原生控件實(shí)現(xiàn)，原生組件層級(jí)高于前端組件，為了能正常覆蓋原生組件，設(shè)計(jì)了cover-view。

所以說(shuō)用cover-view就可以了，但是在用cover-view的時(shí)候也有好多坑，這就導(dǎo)致使用cover-view會(huì)不起作用或者cover-view里的組件也不顯示了，接下來(lái)我就描述一下我已經(jīng)實(shí)現(xiàn)好的方案，希望能幫到大家。 我這邊的需求是底下有個(gè)提交按鈕，但是上面的textarea會(huì)穿透過(guò)提交按鈕，體驗(yàn)很不好。【相關(guān)學(xué)習(xí)推薦：小程序開(kāi)發(fā)教程】

一開(kāi)始我是這邊寫(xiě)的：

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

也是看了好多博文說(shuō)這些寫(xiě)真機(jī)上不顯示，我這邊也是這樣，后來(lái)才發(fā)現(xiàn)了報(bào)錯(cuò)信息。

后來(lái)我就把代碼變成了這樣：

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

但是這樣依然不顯示：通過(guò)給cover-view加背景顏色調(diào)試，發(fā)現(xiàn)cover-view沒(méi)有高：

好使的版本：

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

所以是要給cover-view加樣式啊….

總結(jié)： 如果你cover-view中的代碼不顯示 1、看看你里面是不是用的view;view組件會(huì)在真機(jī)上不顯示； 2、即使用了cover-view，也需要在cover-view中加入z-index;等一些樣式。

如果你的代碼還是不顯示，可以先給cover-view加一個(gè)背景顏色、高度、寬度，來(lái)調(diào)試一下是不是cover-view不顯示。然后再接著看cover-view你的代碼顯示不顯示，一層一層來(lái)調(diào)試，看看原因出現(xiàn)在哪里。