微信小程序input、textarea層級(jí)過(guò)高穿透的問(wèn)題解決
??微信小程序原生組件camera、canvas、input（僅在focus時(shí)表現(xiàn)為原生組件）、live-player、live、pusher、map、textarea、video的層級(jí)是最高的，頁(yè)面中的其他組件無(wú)論設(shè)置 z-index 為多少，都無(wú)法蓋在原生組件上。
從圖中效果可以看出input輸入的內(nèi)容穿透到了選擇列表自定義組件，解決辦法：
1、使用if，當(dāng)觸發(fā)選擇列表時(shí)隱藏input或textare組件，選擇完成點(diǎn)擊確認(rèn)關(guān)閉選擇列表，顯示input或textare。
2、選擇列表自定義組件使用 cover-view 和 cover-image 組件代替view和image，cover-view 和 cover-image 組件，可以覆蓋在部分原生組件上面。
<cover-view class="cover-view" style="{{height}}" wx:if="{{isShowModel}}">
<cover-view class="selectModel">
<cover-view class="model" @tap="onShowOrHideModel()"></cover-view>
<cover-view class="modelBox">
<cover-view class="title">{{title}}(可多選)</cover-view>
<cover-view class="list">
<block wx:for="{{waitClassifyNamesList}}" wx:key="{{index}}">
<cover-view class="li" @tap="onClickSelect({{item.optionCode}})">
<cover-image wx:if="{{filter.isInclude(item.optionCode,classifyIds)}}" class="icon" src="/image/signatory/selected.png"></cover-image>
<cover-image class="icon" src="/image/signatory/unSelect.png" wx:else></cover-image>
<cover-view class="name">{{item.optionName}}</cover-view>
</cover-view>
</block>
</cover-view>
<cover-view class="btn" @tap="onSubmitSelectService">確認(rèn)</cover-view>
</cover-view>
</cover-view>
</cover-view>
兩種方式的實(shí)現(xiàn)效果如上圖，至于選擇何種方式，根據(jù)實(shí)際需求來(lái)選擇。
到此這篇關(guān)于微信小程序input、textarea層級(jí)過(guò)高穿透的問(wèn)題解決的文章就介紹到這了,更多相關(guān)小程序input、textarea穿透內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 解決uni-app微信小程序input輸入框在底部時(shí),鍵盤(pán)彈起頁(yè)面整體上移問(wèn)題
- 一文解決微信小程序button、input和image表單組件
- 微信小程序點(diǎn)擊按鈕動(dòng)態(tài)切換input的disabled禁用/啟用狀態(tài)功能
- 微信小程序事件 bindtap bindinput代碼實(shí)例
- 微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法示例
- 詳解微信小程序input標(biāo)簽正則初體驗(yàn)
- 微信小程序input框中加入小圖標(biāo)的實(shí)現(xiàn)方法
- 微信小程序使用input組件實(shí)現(xiàn)密碼框功能【附源碼下載】
- 微信小程序 input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)
- 微信小程序中input標(biāo)簽詳解及簡(jiǎn)單實(shí)例
- 微信小程序中input組件為什么設(shè)置readonly只讀屬性沒(méi)有作用（失效）?
相關(guān)文章
JavaScript/Js腳本處理html元素的自定義屬性解析(親測(cè)兼容Firefox與IE)
這篇文章主要是對(duì)JavaScript/Js腳本處理html元素的自定義屬性解析(親測(cè)兼容Firefox與IE)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要給大家介紹了Javascript生成帶有參樹(shù)二維碼的方法,實(shí)現(xiàn)的方法還是很簡(jiǎn)單的，有需要的朋友們可以參考借鑒。下面來(lái)一起看看吧。2016-10-10
前端React?Nextjs中的TS類(lèi)型過(guò)濾實(shí)用技巧
今天就來(lái)介紹一個(gè)在其它開(kāi)源庫(kù)中見(jiàn)到的既花里胡哨，又實(shí)用的TS類(lèi)型——TS類(lèi)型過(guò)濾，你會(huì)發(fā)現(xiàn)這些?TS騷操作真的很重要，因?yàn)樗芎芎玫貛椭阕鲮o態(tài)類(lèi)型校驗(yàn)2022-04-04
解決bootstrap模態(tài)框數(shù)據(jù)緩存的問(wèn)題方法
javascript實(shí)現(xiàn)自定義滾動(dòng)條效果
JavaScript數(shù)組、函數(shù)、DOM 與 BOM 實(shí)戰(zhàn)全解析
JS獲取DropDownList的value值與text值的示例代碼
在JavaScript中使用inline函數(shù)的問(wèn)題
