解决uniapp,textarea拉起页面被顶起和键盘被输入框遮挡的问题。

1:Android、ios 同时解决;

2:我们在开发的时候会发现textarea或者input拉起键盘的时候整个页面被顶起了,header也被顶没了;官方给了:adjustPosition='false'属性,设置完之后页面就不会被顶起,但是键盘把输入框挡住了,就很恶心;

3:我的实现思路是,adjustPosition='false' ;用@keyboardheightchange监听键盘的高度;在textarea下面给一个view标签并且加高度;再通过uni.pageScrollTo 在键盘拉起的时候上滑页面;

上代码
<!-- 你的其他dom元素 写多少都可以 --><view><textarea  border='none' :adjustPosition='false'   placeholder="请输入200字以内的申请人意见" count maxlength='500' @keyboardheightchange='keyboardheightchange' style="width: 100%;"   @blur="hideBorad"></textarea><view :style="{'height':(showKeyNum==1?400:keyboardHeight)+'rpx'}"> </view>
</view>
 export default{data() {return { keyboardHeight: 0, // 键盘高度showKeyNum: 0,//键盘打开的次数}},methods: {keyboardheightchange(e) {this.keyboardHeight = e.detail.height;this.showKeyNum++;setTimeout(() => {uni.pageScrollTo({scrollTop: 2000});}, 200)},hideBorad() {this.showKeyNum = 2;this.keyboardHeight = 0;}}}

1:解释一下为什么要设置键盘打开的次数:是因为keyboardheightchange第一次拉起的时候键盘的高度监听不到,所以当等于1 的时候给了一个默认的高度;

2; @blur="hideBorad" 为什么要设置这个事件,是因为Android系统下keyboardheightchange关闭的时候不触发;

3:真的是各种坑等着你跳,大家有好的方法也可以提供过来;谢谢参考!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

谈谈SQL优化

SQL优化是数据库性能优化中的关键环节&#xff0c;旨在提高查询执行的效率和响应速度。下面是一些常见的SQL优化技巧和策略&#xff0c;涵盖索引、查询设计、表结构设计等方面&#xff1a; 1. 索引优化 创建索引&#xff1a;为常用查询的过滤条件&#xff08;WHERE 子句&…

了解json

一.什么是json 1.什么是json是一种轻量级的数据交互&#xff0c;可以按照指定的json格式去组织和封装数据 2.json本质上是一个带有特定格式的字符串 二.json主要功能&#xff1a;json就是一种在各个编程语言中流通的数据格式&#xff0c;负责不同语言中的数据传递和交互&…

【Python时序预测系列】基于CNN+Bi-LSTM实现单变量时间序列预测(案例+源码)

这是我的第309篇原创文章。 一、引言 基于CNN&#xff08;卷积神经网络&#xff09;和Bi-LSTM&#xff08;双向长短期记忆网络&#xff09;的单变量时间序列预测是一种结合空间特征提取和时间依赖建模的方法。以下是一个基于Python和TensorFlow/Keras实现的示例&#xff0c;展…

C++ 高频面试题

C 初级面试题及其详细解答 1. 解释 C 中的基本数据类型。 解答&#xff1a; C 提供了几种基本数据类型&#xff0c;包括&#xff1a; int&#xff1a;整型&#xff0c;用于存储整数。float 和 double&#xff1a;浮点型&#xff0c;用于存储小数。char&#xff1a;字符型&am…

Android 强制使用移动网络访问接口

Android 强制使用移动网络访问接口_安卓连接wifi强制使用移动数据-CSDN博客 Android应用层实现恢复出厂设置功能_android7 intent 打开恢复出厂设置-CSDN博客

YOLOv8改进 | 主干网络| 可变形卷积网络C2f_DCN【CVPR2017】

&#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录&#xff1a;《YOLOv8改进有效涨点》专栏介绍 & 专栏目录 | 目前已有40篇内容&#xff0c;内含各种Head检测头、损失函数Loss、B…

java SQL server 多实例的情况

而对于java&#xff0c;对付多个数据库实例就有些要注意的了&#xff1a; 首先&#xff0c;同样连接字符串上加上“\实例名”&#xff1a; jdbc:sqlserver://127.0.0.1\\mssqlserver2008;DatabaseNameLPT; 此处应去掉端口1433。因为连接数据库自命名实例的url中没有端口号1433…

SiLM585x系列SiLM5851NHCG-DG一款具有分离的管脚输出 单通道隔离驱动器 拥有强劲的驱动能力

SiLM585x系列SiLM5851NHCG-DG是一款单通道隔离驱动器&#xff0c;具有分离的管脚输出&#xff0c;提供3.0A源电流和6.0A灌电流。主动保护功能包括退饱和过流检测、UVLO、隔离故障报警和 2.5A 米勒钳位。输入侧电源的工作电压为3V至5.5V&#xff0c;输出侧电源的工作电压范围为1…

独孤思维:研发的新赚钱项目,活脱脱掉了几层皮

01 今天有个读者问我&#xff0c;xx项目&#xff0c;成功概率多少&#xff1f; 其实这和做这个项目&#xff0c;能赚多少钱&#xff0c;本质是一个问题。 即&#xff0c;有多大的确定性。 言外之意&#xff0c;没有确定性&#xff0c;不稳定&#xff0c;我就不做了。 可以…

一位软件测试工程师繁忙的一天

早晨&#xff1a;启动一天的工作 7:00 AM - 起床 早晨七点准时起床。洗漱、早餐后&#xff0c;检查了手机上的邮件和消息&#xff0c;了解今天的工作安排和优先事项。 8:00 AM - 前往公司 乘坐地铁前往公司。在地铁上&#xff0c;他习惯性地阅读一些技术博客&#xff0c;了解…

小柴冲刺嵌入式系统设计师系列总目录

工作两年 逐渐意识到基础知识的重要性✌️ 意识到掌握了这个证书好像就已经掌握了80%工作中用到的知识了。剩下的就在工作的实战中学习 来和小柴一起冲刺软考吧&#xff01;加油&#x1f61c; 【小柴冲刺软考中级嵌入式系统设计师系列】总目录 前言 专栏目标&#xff1a;冲刺…

涵盖多项功能的文件外发系统,了解一下

伴随着业务范围的不断扩大&#xff0c;信息化的迅速发展&#xff0c;企业与客户、供应商等合作伙伴之间的文件交换也愈加频繁&#xff0c;尤其涉及到核心数据&#xff0c;像核心技术、设计图纸等敏感数据&#xff0c;对其的保护也是越发重视。文件外发系统&#xff0c;应运而生…

Linux基础 - RAID 与 LVM 磁盘阵列技术

目录 零. 简介 一. RAID 二. LVM 三. 总结 零. 简介 在 Linux 中&#xff0c;RAID&#xff08;Redundant Array of Independent Disks&#xff0c;独立磁盘冗余阵列&#xff09;和 LVM&#xff08;Logical Volume Manager&#xff0c;逻辑卷管理器&#xff09;是两种常用的…

机械继电器、固态继电器和模拟开关对比分析

1 结构 2 长期可靠性 与机械继电器相比&#xff0c;光继电器明显提高了可靠性&#xff0c;因为没有活动器件。 光继电器通过 LED 进行光学控制。通常情况下&#xff0c;此 LED 会随着时间的推移比开关本身更快地降级&#xff0c;具体取决于温度、正向电流、开关速度等。随着 LE…

群辉NAS使用Kodi影视墙

目录 一、KODI安装 二、修改UI语言 1、修改显示字体 2、修改语言为中文 四、添加媒体库 五、观看电影 五、高级设置 1、视图类型 2、修改点击播动作 五、补充 1、文件组织结构及命名 2、电影信息的刮削 (1)添加影片 (2)演员管理 (3)影片管理 (4)说明 K…

【面试题】消息中间件

目录 1.什么是消息中间件&#xff1f;它在分布式系统中的作用是什么&#xff1f;2.列举并简述几种常见的消息队列&#xff08;MQ&#xff09;产品&#xff0c;比如RabbitMQ, Kafka, ActiveMQ, RocketMQ等。3.描述一下点对点&#xff08;PTP&#xff09;和发布/订阅&#xff08;…

基于opencv的图像拼接

利用Python的OpenCV库实现了简单的图像拼接&#xff0c;示例 1. 图像拼接的基本原理 图像拼接主要包括以下几个步骤&#xff1a; 特征检测与匹配&#xff1a;首先&#xff0c;需要在待拼接的图像之间找到匹配的关键点或特征。OpenCV提供了如SIFT、SURF、ORB等特征提取器以及…

嵌入式EMC之TVS管

整理一些网上摘抄的笔记&#xff1a; TVS管认识&#xff1a; TVS的Vc要比&#xff0c;DCDC的最大承受电压要小

Flexbox布局详解

Flexbox布局详解&#xff1a;现代CSS布局的利器 在现代Web开发中&#xff0c;布局是一个至关重要的部分。传统的布局方式&#xff0c;如浮动和定位&#xff0c;虽然可以实现复杂的布局&#xff0c;但往往需要大量的CSS代码&#xff0c;并且在维护和扩展时容易出现问题。Flexbo…

web前端大作业--美团外卖1

文章目录 概述代码截图代码链接 概述 web美团 登录和注册功能、页面展示。 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><link rel"stylesheet" href&quo…