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

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

步骤:

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

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

知识点:

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

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

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

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

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

相关推荐
徐飞不会喝酒3 小时前
uniapp 微信小程序uview2.0 u-popup弹出层弹出在遮罩层不影响卡片正常勾选的情况下实现点击空白区域关闭弹层
微信小程序·uni-app
gongzemin10 小时前
uni-app 微信小程序发送订阅消息
前端·微信小程序·uni-app
顽疲12 小时前
从零用java实现 小红书 springboot vue uniapp (9)消息推送功能
java·vue.js·spring boot·uni-app
yuehua_zhang12 小时前
uni app 写的 小游戏,文字拼图?文字拼写?不知道叫啥
前端·javascript·uni-app
weixin_4721835412 小时前
uniapp使用sm4加密
前端·javascript·uni-app
林涧泣12 小时前
【Uniapp-Vue3】watch和watchEffect监听的使用
前端·vue.js·uni-app
顽疲14 小时前
从零用java实现 小红书 springboot vue uniapp (8)个人资料修改 消息页优化
java·vue.js·spring boot·uni-app
多客软件佳佳15 小时前
基于Thinkphp6+uniapp的陪玩陪聊软件开发方案分析
小程序·uni-app·php·生活·交友
黑云压城After16 小时前
uniapp web-view调整修改高度设置
前端·javascript·uni-app
懮 俍16 小时前
uniapp
uni-app