解決微信小程序inputtextarea層級過高穿透問題

篇首語：本文由編程筆記#小編為大家整理，主要介紹了解決微信小程序inputtextarea層級過高穿透問題相關(guān)的知識，希望對你有一定的參考價值。愛掏網(wǎng) - it200.com

??微信小程序原生組件camera、canvas、input&＃xff08;僅在focus時表現(xiàn)為原生組件&＃xff09;、live-player、live、pusher、map、textarea、video的層級是最高的&＃xff0c;頁面中的其他組件無論設(shè)置 z-index 為多少&＃xff0c;都無法蓋在原生組件上。愛掏網(wǎng) - it200.com

從圖中效果可以看出input輸入的內(nèi)容穿透到了選擇列表自定義組件&＃xff0c;解決辦法&＃xff1a;
??1、使用if&＃xff0c;當(dāng)觸發(fā)選擇列表時隱藏input或textare組件&＃xff0c;選擇完成點擊確認(rèn)關(guān)閉選擇列表&＃xff0c;顯示input或textare。愛掏網(wǎng) - it200.com
??2、選擇列表自定義組件使用 cover-view 和 cover-image 組件代替view和image&＃xff0c;cover-view 和 cover-image 組件&＃xff0c;可以覆蓋在部分原生組件上面。愛掏網(wǎng) - it200.com





title(可多選)





item.optionName



確認(rèn)





兩種方式的實現(xiàn)效果如上圖&＃xff0c;至于選擇何種方式&＃xff0c;根據(jù)實際需求來選擇。愛掏網(wǎng) - it200.com