溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

一步快速解決微信小程序中textarea層級太高遮擋其他組件

發(fā)布時間：2020-08-24 16:04:57 來源：腳本之家 閱讀：433 作者：huobox 欄目：web開發(fā)

前言

由于小程序中的textarea組件是原生組件，而原生組件的層級是最高的，所以頁面中的其他組件無論設(shè)置 z-index 為多少，都無法蓋在原生組件上，造成輸入的文字會顯示在小程序其他組件上，如下圖所示：

一步快速解決微信小程序中textarea層級太高遮擋其他組件

<view class='bar bottomfix shadow justify-center'>

<button class='' formType="submit" type="primary" style='font-size:12pt;border:0px;width:300px;'> 保 存</button>

</view>

網(wǎng)上有一些繞彎路的解決辦法，其實小程序有一個直接解決原生組件覆蓋問題的辦法，就是使用cover-view，小程序為了解決原生組件層級最高的限制。小程序?qū)ｉT提供了 cover-view 和 cover-image 組件，可以覆蓋在部分原生組件上面。這兩個組件也是原生組件，但是使用限制與其他原生組件有所不同。

上方覆蓋部分改為如下即可：

<cover-view class='bar bottomfix shadow justify-center'>

<button class='' formType="submit" type="primary" style='font-size:12pt;border:0px;width:300px;'> 保 存</button>

</cover-view>

效果如下，動手試試吧！

一步快速解決微信小程序中textarea層級太高遮擋其他組件

到此就解決了遮蓋問題

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手