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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/607349.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

韩顺平0基础学Java——第4天

p45—p71 老天鹅,居然能中断这么久,唉...学不完了要 API API:application programing interface应用程序编程接口 www.matools.com 可以理解成Python的调包...c的头文件对吧 字符型 char用单引号 String用双引号 char本质上是个整数&#xff0c…

AutoTable, Hibernate自动建立表替代方案

痛点 之前一直使用JPA为主要ORM技术栈,主要是因为Mybatis没有实体逆向建表功能。虽然Mybatis有从数据库建立实体,但是实际应用却没那么美好:当实体变更时,往往不会单独再建立一个数据库重新生成表,然后把表再逆向为实…

Pygame简单入门教程(绘制Rect、控制移动、碰撞检测、Github项目源代码)

Pygame简明教程 引言:本教程中的源码已上传个人Github: GItHub链接 视频教程推荐:YouTube教程–有点过于简单了 官方文档推荐:虽然写的一般,但还是推荐! Navigator~ Pygame简明教程安装pygame一、代码框架二、案件输入…

小红书释放被封手机号 无限注册

前几年抖音也可以释放被封手机号 那时候都不重视 导致现在被封手机号想释放 基本不可能的 或者就是最少几百块 有专业的人帮你通过某些信息差释放 本教程是拆解 小红书被封手机号怎么释放,从今年开始,被封的手机号无法注销了 所以很困扰 那么本教程来…

如何区分APP页面是H5还是原生页面?

刚刚接触手机测试的同学,或多或少都有过这样的疑问:APP页面哪些是H5页面?哪些是原生页面?单凭肉眼,简直太难区分了!我总结了6个小技巧,希望能帮大家答疑解惑。 1、看断网的情况 断开网络,显示…

【生信技能树】拿到表达矩阵之后,如何使用ggplot2绘图系统绘制箱线图?

拿到表达矩阵之后,如何使用ggplot2绘图系统绘制箱线图? 目录 预备知识 绘制箱线图示例 预备知识 1.pivot_longer函数 pivot_longer 是tidyr包中的一个函数,用于将数据框(data frame)从宽格式转换为长格式。在宽格…

CPU、GPU,那NPU是,神经网络到底能做什么!

人工智能时代即将到来。随着人工智能的不断推进,英特尔、AMD和高通等公司也在着眼于各种硬件配置方面。随着NPU(神经网络处理器)的引入,人工智能的应用过程将被加快。 苹果在其芯片中使用NPU已经很多年了,所以NPU并不是…

《深入Linux内核架构》第4章 进程虚拟内存(2)

目录 4.3 内存映射原理 4.4 数据结构 4.4.1 树和链表 4.4.2 虚拟内存区域VMA的表示 4.4.3 相关数据结构 本专栏文章将有70篇左右,欢迎关注,查看后续文章。 本节讲VMA结构体struct vm_area_struct和struct address_space。 4.3 内存映射原理 所有进…

k8s概述及核心组件

一、k8s概述 1.1 引言 docker compose 单机编排工具 有企业在用 docker swarm 能够在多台主机中构建一个docker集群 基本淘汰集群化管理处理工具 容器 微服务封装 dockerfile 编写成镜像 然后进行发布 dockerfile 可以写成shell脚本(函数做调…

【Linux网络编程】HTTPS协议

【Linux网络编程】HTTPS协议 目录 【Linux网络编程】HTTPS协议HTTPS介绍加密常见的加密方式HTTPS的工作过程探究(重点)常见问题完整流程总结 作者:爱写代码的刚子 时间:2024.5.9 前言:本篇博客将会介绍HTTPS协议 HTTPS…

【记录】常见的前端设计系统(Design System)

解释一下设计系统的定义,以及在国内,都有那些优秀的设计系统可以学习,希望可以帮到大家。 什么是设计系统(Design System)? 设计系统(Design System)是一套综合性的指导原则、组件和规则&…

VBA技术资料MF152:列出工作表中所有单元格的注释

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套,分为初级、中级、高级三大部分,教程是对VBA的系统讲解&#…

Linux进程——Linux环境变量

前言:在结束完上一篇的命令行参数时,我们简单的了解了一下Linux中的环境变量PATH,而环境变量不只有PATH,关于更多环境变量的知识我们将在本篇展开! 本篇主要内容: 常见的环境变量 获取环境变量的三种方式 本…

GORM数据库连接池对接Prometheus

一、背景与介绍 Golang的database/sql包定了关于操作数据库的相关接口,但是没有去做对应数据库的实现。这些实现是预留给开发者或者对应厂商进行实现的。 其中让我比较关注的是Golang的sql包有没有实现连接池pool的机制呢? 毕竟Golang是静态语言,类似J…

pwn(一)前置技能

以下是pwn中的题目(漏洞)类型: 关于pwn的学习: 一.什么是pwn?(二进制的漏洞) "Pwn"是一个俚语,起源于电子游戏社区,经常在英语中用作网络或电子游戏文化中的…

AI中转站计费平台系统源码一站式解决方案安装说明

AI中转站计费平台系统源码一站式解决方案安装说明 功能 | Features AI 联网功能 AI online searching service 多账户均衡负载 Multi-account load balancing HTTP2 Stream 实时响应功能 HTTP2 Stream real-time response function 节流和鉴权体系 Throttling and authenticati…

GitHub中Asterank源码python修改成C++(本人python不太会)

GitHub - typpo/asterank: asteroid database, interactive visualizations, and discovery tools 主要目的是在进行多元线性回归的时候将枚举型转换为数值型 python: # # The constants used in calculations for the values of asteroids. ## General constants GENERAL_I…

基于Detectron2的计算机视觉实践

书籍:Hands-On Computer Vision with Detectron2: Develop object detection and segmentation models with a code and visualization approach 作者:Van Vung Pham,Tommy Dang 出版:Packt Publishing 书籍下载-《基于Detectr…

.OpenNJet应用引擎实践——从 0-1 体验感受

目录 一. 🦁 写在前面二. 🦁 安装使用2.1 安装环境2.2 配置yum源2.3 安装软件包2.4 编译代码2.5 启动 三. 🦁 使用效果3.1 编辑配置文件3.2 编辑 HTML 代码 四. 🦁 使用感受 一. 🦁 写在前面 现在互联网体系越来越往云…

小丑的身份证和复印件 (BFS + Floyd)

本题链接:登录—专业IT笔试面试备考平台_牛客网 题目: 样例: 输入 2 10 (JOKERjoke #####asdr) 输出 12 思路: 根据题意,要求最短时间,实际上也可以理解为最短距离。 所以应该联想到有关最短距离的算法&…