uni-popup 弹窗层与软键盘联动

前端

2023-01-07 00:37:07

uni-popup 弹窗与软键盘联动：解决 iOS 滑动问题

引言

在 iOS 设备上使用 uni-popup 弹窗时，当弹窗与软键盘同时出现时，可能会遇到滑动问题。具体表现为，在弹窗和软键盘之间存在一个间隙，无法滑动到弹窗的底部。这会影响用户体验，尤其是在需要在弹窗中输入内容的情况下。

问题分析

iOS 设备上存在的滑动问题主要源于软键盘弹出时，会占据屏幕空间，导致弹窗内容被向上推挤。当弹窗高度较小或软键盘高度较大时，就可能出现滑动无法到底部的现象。

解决方案：监听软键盘高度变化

uniapp 提供了 onKeyboardHeightChange 方法，可以监听软键盘的高度变化。我们可以利用此方法，在软键盘弹出时，动态调整弹窗的高度，使其与软键盘顶部齐平，从而消除滑动问题。

具体实现

在 JavaScript 代码中，可以使用以下代码监听软键盘高度变化：

uni.onKeyboardHeightChange(res => {
  // res.height 为软键盘高度
  if (res.height > 0) {
    // 软键盘弹出
    // 调整弹窗高度，使其与软键盘顶部齐平
  } else {
    // 软键盘收起
    // 恢复弹窗高度为原始值
  }
});

代码示例

import uniPopup from '@uni/popup';

// 监听软键盘弹出和收起事件
uni.onKeyboardHeightChange(res => {
  if (res.height > 0) {
    // 软键盘弹出
    uniPopup.Dialog.setDefaultOptions({
      style: {
        bottom: `${res.height}px`
      }
    });
  } else {
    // 软键盘收起
    uniPopup.Dialog.setDefaultOptions({
      style: {
        bottom: '0px'
      }
    });
  }
});

// 弹出弹窗
uniPopup.Dialog.show({
  title: '标题',
  content: '内容',
  buttons: [
    {
      text: '取消',
      type: 'default',
      color: '#000000',
      size: 'large'
    },
    {
      text: '确定',
      type: 'primary',
      color: '#ffffff',
      size: 'large'
    }
  ]
});