一步快速解決微信小程序中textarea層級太高遮擋其他組件
前言
由于小程序中的textarea組件是原生組件，而原生組件的層級是最高的，所以頁面中的其他組件無論設(shè)置 z-index 為多少，都無法蓋在原生組件上，造成輸入的文字會(huì)顯示在小程序其他組件上，如下圖所示：
<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)上有一些繞彎路的解決辦法，其實(shí)小程序有一個(gè)直接解決原生組件覆蓋問題的辦法，就是使用cover-view，小程序?yàn)榱私鉀Q原生組件層級最高的限制。小程序?qū)ｉT提供了 cover-view 和 cover-image 組件，可以覆蓋在部分原生組件上面。這兩個(gè)組件也是原生組件，但是使用限制與其他原生組件有所不同。
上方覆蓋部分改為如下即可：
<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>
效果如下，動(dòng)手試試吧！
到此就解決了遮蓋問題
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
微信小程序?qū)崙?zhàn)之雙人五子棋游戲是實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了如何利用微信小程序?qū)崿F(xiàn)雙人五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
layui實(shí)現(xiàn)二維碼彈窗、并下載到本地的方法
今天小編就為大家分享一篇layui實(shí)現(xiàn)二維碼彈窗、并下載到本地的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
uni-app操作數(shù)據(jù)庫的三種方法總結(jié)
數(shù)據(jù)庫操作的,可以采用多方案,下面這篇文章主要給大家介紹了關(guān)于uni-app操作數(shù)據(jù)庫的三種方法,文中通過實(shí)例代碼和圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
js prototype和__proto__的關(guān)系是什么
這篇文章主要介紹了js prototype和__proto__的關(guān)系是什么，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Javascript 異步加載詳解(瀏覽器在javascript的加載方式)
本文總結(jié)一下瀏覽器在 javascript 的加載方式,需要的朋友可以參考下2012-05-05
這篇文章主要介紹了JavaScript錯(cuò)誤處理機(jī)制的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-08-08
javascript實(shí)現(xiàn)隨機(jī)讀取數(shù)組的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)隨機(jī)讀取數(shù)組的方法,涉及javascript隨機(jī)數(shù)及針對數(shù)組操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JavaScript實(shí)現(xiàn)的XML與JSON互轉(zhuǎn)功能詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的XML與JSON互轉(zhuǎn)功能,結(jié)合實(shí)例形式分析了基于javascript的xml與json相關(guān)轉(zhuǎn)換功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-02-02
js實(shí)現(xiàn)正則匹配中文標(biāo)點(diǎn)符號的方法
這篇文章主要介紹了js實(shí)現(xiàn)正則匹配中文標(biāo)點(diǎn)符號的方法,涉及JavaScript正則匹配與判定的簡單使用技巧,需要的朋友可以參考下2015-12-12
webpack下實(shí)現(xiàn)動(dòng)態(tài)引入文件方法
下面小編就為大家分享一篇webpack下實(shí)現(xiàn)動(dòng)態(tài)引入文件方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02