scroll-view解决安卓手机软键盘将输入框顶起

起因

最近开发一个问卷功能，给测试小哥测试时突然告诉我在安卓手机上文本输入框聚焦时，文本内容会被安卓手机的软键盘顶到别的位置（如下图），于是我立马看了看苹果手机上有没有类似问题，发现没有，立马引起了我的好奇。虽然没遇到过这个问题，但是今天过后肯定不会再成为我的问题！

思路

刚开始我认为是uniapp自带组件uni-easyinput的适配问题，我优先查看了uni的文档可并没有给我提供有效的解决方案，经过一番查阅后我改用了原生的input组件，发现安卓手机上依然有这个问题，于是否定了我之前的猜想（uni-easyinput组件的适配问题）。既然安卓手机上软键盘弹出时聚焦点会错位，会不会是因为软键盘把聚焦点元素往上《顶》了呢？又经过一番查阅，终于！

原因

在Uniapp中，当在安卓手机上唤醒软键盘时，输入框被顶出原本的位置可能是由于安卓系统的软键盘弹出方式导致的。

在安卓系统中，软键盘的弹出方式有两种：覆盖式弹出和调整窗口大小式弹出。大部分安卓系统采用的是覆盖式弹出，即软键盘弹出时会将输入框顶起，以腾出空间给软键盘显示。这种行为与iOS系统中的默认行为（即将整个页面上移，保持输入框可见）不同。

Uniapp框架本身对于软键盘的弹出方式没有做过多的定制，因此在安卓手机上，默认情况下会使用安卓系统的默认行为，即覆盖式弹出。这就导致了输入框被顶出原本位置的情况。

解决方案

1.解决这个问题的一种方法是在特定情况下手动调整页面的滚动位置，以保持输入框的可见性。可以监听输入框获取焦点事件，在事件触发时，通过调用相应的API（如uni.pageScrollTo()）来滚动页面，将输入框位置调整为可见区域。这样即使软键盘覆盖了部分输入框，用户仍然能够看到正在输入的内容。

2.（我选择的解决方案）因为框架是Uniapp，所以我选择使用scroll-view组件去包裹整个页面来解决页面上移的问题理由如下：

在Uniapp中，使用 scroll-view 包裹输入框可以解决输入框被软键盘顶出原本位置的问题，是因为 scroll-view 具有滚动能力。

当 scroll-view 包裹输入框时，当软键盘弹出时，scroll-view 内容区域会自动调整高度以适应软键盘的覆盖。这意味着，当软键盘出现时，scroll-view 会自动滚动，将输入框显示在可见区域内。

通过使用 scroll-view，可以将整个页面内容包裹在一个滚动容器中，确保输入框在弹出软键盘时仍然可见。在输入框获得焦点时，scroll-view 将相应地滚动以确保输入框的可见性。

这种方法的优势在于无需手动计算滚动位置或调用页面滚动的 API。 scroll-view 会自动处理滚动逻辑，以确保输入框的可见性和用户体验的一致性。

总结起来，使用 scroll-view 包裹输入框能够解决输入框被软键盘顶出原本位置的问题是因为 scroll-view 提供了自动滚动的能力，保证输入框在软键盘弹出时仍然可见