uni-app页面底部会留下键盘大小透明空白

uni-app页面底部会留下键盘大小透明空白

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.4.6

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：iPhone XS Max

页面类型：vue

vue版本：vue2

打包方式：云端

操作步骤：
1 将editor组件大小占满页面
2 将页面进入动画设置为 "animationType": "slide-in-bottom"
3 在其他页面进入（多试几次就会出现bug）

预期结果：
页面正常显示编辑器

实际结果：
页面底部出现键盘大小

bug描述：
editor 输入框占满页面时使用底部滑入动画，进入页面时底部会留下键盘大小透明空白

更多关于uni-app页面底部会留下键盘大小透明空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

给个demo看一下

更多关于uni-app页面底部会留下键盘大小透明空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题有解决吗 我是iphone8 plus上偶现键盘区域透明

能否提供一下测试工程

能否提供一下问题工程

在 uni-app 中，当页面底部有输入框时，键盘弹出后可能会留下一个透明空白区域。这个问题通常是由于键盘弹出时，页面布局没有正确调整导致的。以下是一些常见的解决方案：

1. 使用 page 的 padding-bottom 或 margin-bottom

你可以通过调整 page 的 padding-bottom 或 margin-bottom 来避免键盘弹出时留下的空白区域。

page {
  padding-bottom: 0;
  margin-bottom: 0;
}

2. 使用 uni-app 的 onKeyboardHeightChange 事件

uni-app 提供了 onKeyboardHeightChange 事件，可以监听键盘高度的变化，并根据键盘高度动态调整页面布局。

export default {
  data() {
    return {
      keyboardHeight: 0
    };
  },
  onLoad() {
    uni.onKeyboardHeightChange(res => {
      this.keyboardHeight = res.height;
    });
  },
  onUnload() {
    uni.offKeyboardHeightChange();
  }
};

然后在页面布局中，根据 keyboardHeight 动态调整底部元素的位置。

<view :style="{ paddingBottom: keyboardHeight + 'px' }">
  <!-- 页面内容 -->
</view>

3. 使用 input 的 adjust-position 属性

在 input 组件中，可以设置 adjust-position 属性为 true，这样在键盘弹出时，页面会自动调整位置，避免出现空白区域。

<input adjust-position="true" />

4. 使用 scroll-view 包裹内容

如果页面内容较多，可以使用 scroll-view 包裹内容，并设置 scroll-into-view 属性，确保输入框在键盘弹出时自动滚动到可视区域。

<scroll-view scroll-y :scroll-into-view="scrollIntoViewId">
  <!-- 页面内容 -->
  <input id="input1" @focus="scrollToInput('input1')" />
</scroll-view>

export default {
  data() {
    return {
      scrollIntoViewId: ''
    };
  },
  methods: {
    scrollToInput(id) {
      this.scrollIntoViewId = id;
    }
  }
};

5. 使用 uni-app 的 page-meta 组件

uni-app 提供了 page-meta 组件，可以用来动态设置页面的 viewport 属性，从而避免键盘弹出时页面布局出现问题。

<page-meta :viewport-fit="viewportFit"></page-meta>

export default {
  data() {
    return {
      viewportFit: 'auto'
    };
  },
  methods: {
    adjustViewport() {
      this.viewportFit = 'cover';
    }
  }
};

6. 使用 uni-app 的 uni.setNavigationBarTitle 方法

在某些情况下，键盘弹出时可能会导致导航栏标题位置发生变化，可以通过 uni.setNavigationBarTitle 方法动态调整导航栏标题。

uni.setNavigationBarTitle({
  title: '页面标题'
});
回到顶部