站長資訊網小程序中怎么解決textarea層級過高穿透問題？下面本篇文章給大家介紹一下微信小程序通過cover-view解決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加樣式啊….
總結： 如果你cover-view中的代碼不顯示 1、看看你里面是不是用的view;view組件會在真機上不顯示； 2、即使用了cover-view，也需要在cover-view中加入z-index;等一些樣式。
如果你的代碼還是不顯示，可以先給cover-view加一個背景顏色、高度、寬度，來調試一下是不是cover-view不顯示。然后再接著看cover-view你的代碼顯示不顯示，一層一層來調試，看看原因出現在哪里。
