欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uniapp中弹起软键盘的相关设置,ios中软键盘弹起不兼容的混合写法

程序员文章站 2022-04-20 14:39:04
...

1.首先需要在page.json中设置软键盘弹起的相关属性

{"path": "your page link",
	"style": {
		"app-plus": {
			"softinputMode": "adjustResize", // 自适应软键盘弹起页面高度
			"softinputNavBar": "none" // 取消ios中软键盘上方完成按钮等
		}
	}
}

2.页面中动态设置需要滚动的元素高度

// 键盘获取焦点事件:
inputFocus(e) {
	let systemInfo = uni.getSystemInfoSync(); 
	let screentHeight = systemInfo.screenHeight;// 获取屏幕高度
	let statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
	let bottombarHeight = 0; //底部输入框高度
	const query = uni.createSelectorQuery().in(this);
	query.select('.bottom').boundingClientRect(data => {
		bottombarHeight = data.height; // 动态获取底部输入框相关结构的高度
		this.height = screentHeight - statusBarHeight - bottombarHeight - e.detail.height - 44 + 'px'; // e.detail.height为软键盘高度
		this.jumpToMaoPoint(false); // 滚动区域滚动至最底端
	}).exec();
},