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

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

步骤:

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

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

知识点:

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

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

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

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

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

相关推荐
2501_9160074713 小时前
苹果手机iOS应用管理全指南与隐藏功能详解
android·ios·智能手机·小程序·uni-app·iphone·webview
2501_9151063216 小时前
全面理解 iOS 帧率,构建从渲染到系统行为的多工具协同流畅度分析体系
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088918 小时前
iOS 能耗检测的工程化方法,构建多工具协同的电量分析与性能能效体系
android·ios·小程序·https·uni-app·iphone·webview
济南壹软网络科技有限公司18 小时前
综合社交服务平台的技术架构与实践:构建高可用、多端覆盖的互动生态
uni-app·php·开源源码·陪玩陪聊h5
2501_9159214319 小时前
重新理解 iOS 的 Bundle Id 从创建、管理到协作的工程策略
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063219 小时前
当 altool 退出历史舞台,iOS 上传链路的演变与替代方案的工程实践
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张19 小时前
Transporter 的局限与替代路径,iOS 上传流程在多平台团队中的演进
android·ios·小程序·https·uni-app·iphone·webview
lwprain19 小时前
uniapp使用uniview-plus性能问题处理
uni-app
00后程序员张19 小时前
Python 抓包工具全面解析,从网络监听、协议解析到底层数据流捕获的多层调试方案
开发语言·网络·python·ios·小程序·uni-app·iphone
AH_HH21 小时前
UniApp H5 代理失效的终极替代方案
uni-app