在微信端 vue 项目中，当软键盘弹出时，输入框下方区域经常会出现被压缩的问题。尽管网上的解决方案建议使用 scrollto，但对于部分情况可能无效。
问题原因
页面布局中使用固定定位（position: fixed 或 position: sticky）的元素，在软键盘弹出时会向上偏移，导致跟随键盘输入框下方区域的压缩。
立即学习“前端免费学习笔记（深入）”；
解决方案
根据窗口全尺寸和软键盘弹出状态，使用 js 来动态显示和隐藏固定定位元素。
mounted() {
window.addEventListener('resize', () => {
// 以窗口高度加上经验值作为触发阈值
if (window.innerHeight < xxxxx) {
// 假设 buttonWrap 是受影响的元素的容器
this.$refs.buttonWrap.style.display = "none";
} else {
this.$refs.buttonWrap.style.display = "block"; // 或 "flex"
}
});
}通过这种方式，当软键盘弹出时，固定定位元素将被隐藏，防止页面区域的压缩。需要注意，触发阈值需要根据实际窗口高度和元素布局进行调整。
