uniapp小程序项目解决键盘问题

1. 点击输入框,使页面不上移,并实现软键盘弹出。

步骤:

  1. 使用adjust-position属性,禁止页面上移;

  2. 但此时如果输入框在底部,当点击输入时,键盘会弹起,这时候需要动态移动输入框的位置,使输入框位于键盘的上面,所以页需要获取键盘的高度。

知识点:

  1. input有一个adjust-position属性,控制当键盘弹起时,是否自动上推页面。
  2. uni.onKeyboardHeightChange监听键盘高度变化,获取键盘高度。
    获取键盘高度 input的adjust-position属性

2. 解决键盘弹出时和输入框是分开的,之间有空隙,显示出来感觉不流畅。

方法:动态改变输入框外面包裹的盒子的高度。

当最初,键盘没有弹出时,设置应该初始值;

当键盘弹出时,获取键盘的高度,设置盒子的高度=键盘的高度+最初盒子的高度

相关推荐
敲代码的鱼哇2 天前
发送短信/拨打电话/获取联系人能力 UTS 插件(cz-sms)
android·前端·ios·uni-app·安卓·harmonyos·鸿蒙
MY_TEUCK3 天前
【AI开发】从0到1写一个uni-app Vue3 小程序开发的Skill:用法、流程与踩坑复盘
人工智能·uni-app
雪芽蓝域zzs3 天前
uni-app x uts类转换
uni-app
游戏开发爱好者83 天前
深入理解iOSTime Profiler:提升iOS应用性能的关键工具
android·ios·小程序·https·uni-app·iphone·webview
gskyi3 天前
UniApp Vue3 数据透传终极指南
javascript·vue.js·uni-app
gskyi3 天前
uni-app 高阶实战:onLoad与getCurrentPages深度技巧
前端·javascript·vue.js·uni-app
阿奇__4 天前
uniapp支付宝 H5 开发踩坑,hash模式下取参要规范!
开发语言·uni-app
云起SAAS4 天前
小智笔记APP源码 | 8大广告联盟聚合(穿山甲/优量汇/快手/百度) | 应用市场过审极速版 | uni-app全栈商用项目
笔记·uni-app·广告联盟·笔记app
蹦哒4 天前
UniApp 原生插件开发完整指南
uni-app
a_Ichuan4 天前
在HBuilderX创建的uniapp项目中使用unocss
前端·uni-app