小程序中textarea層級過高穿透問題怎么解決

這篇文章主要介紹“小程序中textarea層級過高穿透問題怎么解決”，在日常操作中，相信很多人在小程序中textarea層級過高穿透問題怎么解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”小程序中textarea層級過高穿透問題怎么解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

自從做小程序以來，就遇到了好多坑，其中一個就是textarea層級過高，會穿透其他層次，這時候用z-index也是不管用的。 官方是這么說的： >小程序框架為了優化體驗，部分組件如map、video、textarea、canvas通過原生控件實現，原生組件層級高于前端組件，為了能正常覆蓋原生組件，設計了cover-view。

所以說用cover-view就可以了，但是在用cover-view的時候也有好多坑，這就導致使用cover-view會不起作用或者cover-view里的組件也不顯示了，接下來我就描述一下我已經實現好的方案，希望能幫到大家。 我這邊的需求是底下有個提交按鈕，但是上面的textarea會穿透過提交按鈕，體驗很不好。

一開始我是這邊寫的：

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

也是看了好多博文說這些寫真機上不顯示，我這邊也是這樣，后來才發現了報錯信息。

后來我就把代碼變成了這樣：

<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加背景顏色調試，發現cover-view沒有高：

好使的版本：

<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加樣式啊...

到此，關于“小程序中textarea層級過高穿透問題怎么解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！