uni h5 底部内容fixed定位后被软键盘推起的解决办法
2026/6/8 2:50:47 网站建设 项目流程

解决方案:利用输入框焦点事件,结合监听屏幕高度变化解决此问题,代码如下:

<template> <view class="box"> <view> <input type="text" placeholder="请输入框一" @focus="focus" @blur="blur"> </view> <view> <input type="text" placeholder="请输入框二" @focus="focus" @blur="blur"> </view> <view style="text-align: center;position: fixed;bottom: 70rpx;width: 100%;" v-if="footer"> 客服热线:400-023-000 </view> </view> </template> <script> export default { data() { return { footer: true, windowHeight: '' } }, onLoad() { uni.getSystemInfo({ success: (res)=> { this.windowHeight = res.windowHeight; } }); uni.onWindowResize((res) => { if(res.size.windowHeight < this.windowHeight){ this.footer= false }else{ this.footer = true } }) }, methods:{ focus(){ this.footer= false }, blur(){ this.footer = true } } } </script>

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询