自從做小程序以來,就遇到了好多坑,其中一個就是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你的代碼顯示不顯示,一層一層來調試,看看原因出現在哪裏。