iOS微信小程序键盘弹出时输入框被挡住-Toy模板网

这篇具有很好参考价值的文章主要介绍了iOS微信小程序键盘弹出时输入框被挡住。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 背景：

底部输入框采用fixed定位后，在iPhone13这种有底部安全区的手机上，键盘弹出时被遮挡，在安卓机上是正常的。

小程序输入框被键盘挡住,前端,JavaScript,微信小程序,微信小程序,ios,Powered by 金山文档

2. 查找问题：

看了网上的解决方案说设置“adjust-position”，试了一下没效果，本来现在这个属性也是默认为true的，看网上另一个解决方案就是判断键盘弹出时，手动改变bottom值，实测是可以的

3. 解决方案关键代码

<template>
    <view class="page">
        <view class="footer footer-space" :style="{bottom: `${keyboardHeight}px`}">
          <input 
            v-model="commentInput" 
            :adjust-position="false"
            placeholder="输入"
          ></input>
        </view>
    </view>
 </template>
 <script>
 export default {
    data() {
        return {
            keyboardHeight: 0, // 键盘高度
        }
    },
    onLoad() {

        let iphoneSafeHeight = 0 // ios安全区高度
        //获取屏幕信息
        uni.getSystemInfo({ 
            success(res) { 
                iphoneSafeHeight = res.screenHeight -  res.safeArea.bottom
            }
        })
        // 监听键盘变化
        uni.onKeyboardHeightChange(res => {
          this.keyboardHeight = res.height > 0 ? res.height - iphoneSafeHeight : res.height // 有安全区时需要减去该高度，不然还是会被挡住
        })
    }
 }
 </script>
 <style lang="scss" scoped>
 .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    border-top: 2rpx solid rgba(0,0,0,0.1);
    padding: 20rpx 28rpx;
    width: 100%;
    box-sizing: border-box;
    font-size: 28rpx;
    background: #fff;
}
.footer-space {
    padding-bottom: constant(safe-area-inset-bottom) !important; /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom) !important; /* 兼容 iOS >= 11.2 */
}
 </style>