uniapp开发的小程序toast被键盘遮挡提示内容无法完全显示问题解决

问题描述

开发抖音小程序后,当用户提交反馈后,调用了系统的toast来显示是否提交成功,结果被系统的键盘给盖住,无法显示完全。

即,简单来说:Toast会被弹出的输入法遮住,无法显示系统提示内容。

如下图:

image-问题描述

因为我用uniapp开发抖音小程序的,这个提示框用的是:

uni.showToast({
    title: '提交成功',
    duration: 1500
});

虽然是uniapp,但其本质还是调用的是各个小程序平台的原生组件,即如果是抖音,对应到的方法:tt.showToast。所以排除了是兼容性问题。

同时看了官方文档(见下方参考链接),也没有对应的设置显示位置或偏移量的问题。所以不能通过配置方法的参数来解决问题。

问题解决

其实问题解决有两种方式:

1、自己写个toast的自定义组件,这样就能方便控制它的显示位置 。缺点是要写不少的代码,不予采纳

2、点击提交反馈按钮后,隐藏系统软键盘,以便让用户看到反馈(推荐)

幸运的是,还真有这么一个全端小程序兼容的方法uni.hideKeyboard()可以实现这一点:

也就是在提交反馈后,先关闭软键盘,再弹出toast

代码如下:

// 点击提交反馈按钮的方法
handleFeedBack() {
    // 隐藏软键盘,解决提示语被遮住问题
    uni.hideKeyboard();
    uni.showToast({
        title: '提交成功',
        duration: 1500
    });
}

作用:

隐藏已经显示的软键盘,如果软键盘没有显示则不做任何操作。

在input、textarea等组件中 focus 拉起键盘后,手动调用此接口可以收起键盘。

兼容性也很不错:

image-20240509174630803

对应的抖音小程序的API为:tt.hideKeyboard()

参考链接:

1、uni.showToast : https://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast

2、tt.showToast:https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/api/interface/interfeedback/tt-show-toast/

3、uni.hideKeyboard():https://uniapp.dcloud.net.cn/api/key.html#hidekeyboard

4、tt.hideKeyboard():https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/api/interface/keyboard/hide-keyboard/

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-13 06:00:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-13 06:00:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-13 06:00:04       82 阅读
  4. Python语言-面向对象

    2024-05-13 06:00:04       91 阅读

热门阅读

  1. Redis 本机无法访问

    2024-05-13 06:00:04       31 阅读
  2. conda 常用20个命令

    2024-05-13 06:00:04       32 阅读
  3. SQLite 命令

    2024-05-13 06:00:04       36 阅读
  4. Unix/Linux C语言 获取控制台窗口尺寸

    2024-05-13 06:00:04       34 阅读
  5. vue-router(路由)

    2024-05-13 06:00:04       30 阅读
  6. 【CV】计算机视觉是什么?

    2024-05-13 06:00:04       25 阅读