解決微信小程序placeholder文字”懸浮“問題


方法一:

在彈出層顯示時隱藏input或者textarea組件,測試發現只有設置”display:none“才生效,設置"opacity:0"真機測試placeholder的文字依舊存在。當然也可以設置wx:if或hidden來顯示隱藏,只不過這些做法都影響布局,不推薦

后來再想了下,其實可以在隱藏textarea的時候用view來模擬textarea顯示內容,這樣既不改變布局,也能合理地展示內容。

方法二:

通過“cover-view”組件來寫彈出層,不修改placeholder。

官方原話:

覆蓋在原生組件之上的文本視圖,可覆蓋的原生組件包括mapvideocanvascameralive-playerlive-pusher,只支持嵌套cover-viewcover-image,可在cover-view中使用button

 這個做法適合在彈出層層級比較單一的時候,倘若彈出層是一個自定義的日歷,且日歷的每個組件都要使用coever-view,cover-image代替,其渲染性能會大大減弱。(其實picker組件也是可以在cover-view中使用的,具體是將其顯示的值用cover-view包裹即可)

方法三:

通過控制“placeholder-style"或者”placeholder-class"來設置placeholder的顏色來顯示或隱藏placeholder文字。

<textarea placeholder-style="color: transparent" placeholder="請輸入"/>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM