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

前言

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

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

解决方法

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

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

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