前言

不知道大家開發微信小程序的時候有沒有遇到這么一個問題，就是在表單頁面中，點擊輸入框后，輸入框頂起會把頂部欄給遮擋住，如下圖所示：

遇到這種情況有沒有解決的辦法呢？能不能既將頁面頂起，同時頂部欄依然正常展示呢？答案是有的！

解決方法

大家只要將 input 或者 textarea 組件，直接改成 editor 組件，你就會發現在輸入框聚焦的時候，頁面被頂上去了，但是導航欄還是可以正常顯示：

editor 原本是微信小程序中的富文本編輯器，如果經常開發小程序的同學應該知道原生的 input 和 textarea 各種小 bug 數不勝數，例如層級穿透，遮擋頂部欄，聚焦位置錯誤等等。如果你想避免這些錯誤，我建議你可以封裝一個 editor 組件作為統一的輸入框使用，這個富文本編輯器除了可以自定義光標的顏色，原生輸入框那些 bug 他都沒有，而且放在頁面上的效果和普通輸入框是一摸一樣的。

具體的原理我不清楚，畢竟是原生組件，我們看不到它是如何實現的，這里只是為大家提供一個避免踩坑的好方法，希望對你有所幫助！