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();
},