禁止Uniapp iOS键盘弹起时页面滚动的解决方案

问题描述

在使用Uniapp开发iOS应用时，当键盘弹起时，页面会自动滚动以保证输入框的可见性。然而，有时我们希望页面保持不滚动，以便用户可以继续浏览页面的其他部分。本文将介绍如何解决这个问题，并提供示例代码。

解决方案

要解决Uniapp iOS键盘弹起时页面滚动的问题，我们可以通过监听键盘事件，然后控制页面的滚动行为。具体步骤如下：

  1. 在uni-app的页面组件中，通过监听键盘的弹起和收起事件，分别执行相应的处理逻辑。
export default {
  data() {
    return {
      isKeyboardOpened: false, // 标记键盘是否已经弹起
    };
  },
  mounted() {
    // 监听键盘弹起事件
    uni.onKeyboardHeightChange((res) => {
      this.isKeyboardOpened = res.height > 0;
    });
  },
  methods: {
    // 监听键盘收起事件
    onKeyboardHide() {
      this.isKeyboardOpened = false;
    },
  },
};
  1. 在页面中添加一个透明的遮罩层，用于接收用户的滚动操作。
<template>
  <view>
    <view class="content">
      <!-- 页面内容 -->
    </view>
    <!-- 遮罩层 -->
    <view class="mask" @touchmove.stop.prevent="onMaskTouchMove"></view>
  </view>
</template>

<style>
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 9999; /* 设置一个较大的层级，保证遮罩层能够接收滚动事件 */
  }
</style>
  1. 在遮罩层的触摸移动事件中，判断当前键盘是否弹起，如果弹起则阻止默认的页面滚动行为。
export default {
  methods: {
    onMaskTouchMove(event) {
      if (this.isKeyboardOpened) {
        event.preventDefault();
      }
    },
  },
};

通过以上步骤，我们可以实现Uniapp iOS键盘弹起时页面不滚动的效果。当键盘弹起时，用户可以仍然可以浏览页面的其他内容，而不会被键盘遮挡。

示例

为了更好地理解上述解决方案，我们来看一个示例场景：一个聊天页面，页面中包含输入框和消息列表。在键盘弹起时，输入框需要始终位于键盘上方，而消息列表要保持不滚动。

首先，我们需要在页面组件的mounted生命周期中添加监听键盘弹起的代码：

export default {
  mounted() {
    uni.onKeyboardHeightChange((res) => {
      this.isKeyboardOpened = res.height > 0;
    });
  },
  methods: {
    // ...
  },
};

然后，在模板中添加输入框和消息列表的代码：

<template>
  <view>
    <view class="message-list">
      <!-- 消息列表 -->
    </view>
    <view class="input-box">
      <!-- 输入框 -->
    </view>
    <view class="mask" @touchmove.stop.prevent="onMaskTouchMove"></view>
  </view>
</template>

<style>
  .message-list {
    height: 80vh; /* 设置消息列表的高度，以保证页面滚动时不会影响输入框的位置 */
    overflow-y: auto;
  }
  
  .input-box {
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f2f2f2;
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 9999;
  }
</style>

最后，在页面组件中添加遮罩层的触摸移动事件处理函数：

export default {