微信小程序input、textarea層級過高穿透的問題解決
??微信小程序原生組件camera、canvas、input(僅在focus時表現(xiàn)為原生組件)、live-player、live、pusher、map、textarea、video的層級是最高的,頁面中的其他組件無論設(shè)置 z-index 為多少,都無法蓋在原生組件上。
從圖中效果可以看出input輸入的內(nèi)容穿透到了選擇列表自定義組件,解決辦法:
1、使用if,當觸發(fā)選擇列表時隱藏input或textare組件,選擇完成點擊確認關(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">確認</cover-view> </cover-view> </cover-view> </cover-view>
兩種方式的實現(xiàn)效果如上圖,至于選擇何種方式,根據(jù)實際需求來選擇。
到此這篇關(guān)于微信小程序input、textarea層級過高穿透的問題解決的文章就介紹到這了,更多相關(guān)小程序input、textarea穿透內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
小程序云開發(fā)如何實現(xiàn)圖片上傳及發(fā)表文字
這篇文章主要為大家詳細介紹了小程序云開發(fā)教程,如何實現(xiàn)圖片上傳及發(fā)表文字,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-05-05JS常見DOM節(jié)點操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】
這篇文章主要介紹了JS常見DOM節(jié)點操作,結(jié)合實例形式分析了JavaScript針對DOM節(jié)點的創(chuàng)建 ,插入,刪除,復(fù)制,查找等操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下2018-05-053分鐘教你用JavaScript實現(xiàn)電子簽名效果
電子簽名已經(jīng)成為現(xiàn)代商業(yè)中不可或缺的一部分,它可以提高業(yè)務(wù)流程的效率和安全性。本文將介紹如何使用HTML5的canvas元素和JavaScript在前端實現(xiàn)電子簽名,需要的可以參考一下2023-04-04