微信小程序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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript動(dòng)畫(huà)之模擬拖拽效果篇
其實(shí)javascript本身是具有原生拖放功能的,但是由于兼容性問(wèn)題,以及功能實(shí)現(xiàn)的方式,用的不是很廣泛。javascript動(dòng)畫(huà)廣泛使用的還是模擬拖拽。本文將詳細(xì)介紹javascript的模擬拖拽,有需要的可以參考借鑒。2016-09-09小程序云開(kāi)發(fā)如何實(shí)現(xiàn)圖片上傳及發(fā)表文字
這篇文章主要為大家詳細(xì)介紹了小程序云開(kāi)發(fā)教程,如何實(shí)現(xiàn)圖片上傳及發(fā)表文字,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05JS常見(jiàn)DOM節(jié)點(diǎn)操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】
這篇文章主要介紹了JS常見(jiàn)DOM節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了JavaScript針對(duì)DOM節(jié)點(diǎn)的創(chuàng)建 ,插入,刪除,復(fù)制,查找等操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下2018-05-053分鐘教你用JavaScript實(shí)現(xiàn)電子簽名效果
電子簽名已經(jīng)成為現(xiàn)代商業(yè)中不可或缺的一部分,它可以提高業(yè)務(wù)流程的效率和安全性。本文將介紹如何使用HTML5的canvas元素和JavaScript在前端實(shí)現(xiàn)電子簽名,需要的可以參考一下2023-04-04