微信小程序点击输入框时，顶部导航栏被遮挡问题如何解决？

前言

不知道大家开发微信小程序的时候有没有遇到这么一个问题，就是在表单页面中，点击输入框后，输入框顶起会把顶部栏给遮挡住，如下图所示：

遇到这种情况有没有解决的办法呢？能不能既将页面顶起，同时顶部栏依然正常展示呢？答案是有的！

解决方法

大家只要将 input 或者 textarea 组件，直接改成 editor 组件，你就会发现在输入框聚焦的时候，页面被顶上去了，但是导航栏还是可以正常显示：

editor 原本是微信小程序中的富文本编辑器，如果经常开发小程序的同学应该知道原生的 input 和 textarea 各种小 bug 数不胜数，例如层级穿透，遮挡顶部栏，聚焦位置错误等等。如果你想避免这些错误，我建议你可以封装一个 editor 组件作为统一的输入框使用，这个富文本编辑器除了可以自定义光标的颜色，原生输入框那些 bug 他都没有，而且放在页面上的效果和普通输入框是一摸一样的。

具体的原理我不清楚，毕竟是原生组件，我们看不到它是如何实现的，这里只是为大家提供一个避免踩坑的好方法，希望对你有所帮助！