页面自动上推怎么办？用对方法很简单！-诸暨抖音短视频直播商城制作开发为你呈现

在活动报名、物流快递等领域，用户通常需要在小程序内填写信息。当用户点击输入框时，键盘会自动弹起，同时内容整体向上移，从而保证键盘在输入框下方，方便用户及时看到填写内容。

然而不同手机系统的差异容易导致页面整体上推，甚至出现导航栏被推出屏幕外的情况。

3、绑定键盘事件

开发者需要计算手动上推的距离，然后通过 bindkeyboardheightchange 属性 触发上推事件，实现准确定位。

点击查看代码

其中计算上推距离需要开发者关注键盘高度、输入框高度等细节，调整出合适的上推距离。

点击查看上推距离计算方式

• 键盘弹起后，获取到键盘高度 C，用显示区域 B 减去键盘区域 C 即是可使用的区域 D

• 获取元素 E/H 输入栏底部距离显示区域的坐标：E-bottom / H-bottom

• 若输入栏底部坐标小于可使用区域 D，如 H-bottom，则说明当键盘弹起时，该输入栏不会被键盘遮挡，不需要推动；相反，若大于 D，如 E-bottom，则说明键盘弹起时，输入栏会被键盘遮挡，则需要页面上推至输入栏完全展示出来

• 针对需要上推的情况，将 E-bottom 减去 D，得到差值 F，即是当前元素距离完全展示还需要滚动的距离

• 页面实际滚动距离应该为 F 加上页面已有的滚动距离，因此在滚动之前，需要再获取一次当前页面的滚动距离

• 如果页面高度不够，无法滚动这么长的距离，因此，当键盘弹起时，开发者需要给页面增加高度，例如增加的键盘高度

点击查看代码

随着小程序在日常生活的广泛应用，用户不仅关注功能完整性，也重视使用体验。每个体验细节都有可能影响用户使用满意度。通过上述 2 种方案，开发者能够灵活控制页面上推方式，保证用户体验，更好地推动业务发展。

原创｜腾讯前端开发工程师 maureenwan