uni-app 解决手机软键盘弹出挤压页面变形问题
我们做一个手机登录页面时，页面底部有个通过定位并定位到底部的一些同意阅读协议的盒子
当点击登录input输入框时，部分安卓手机会出现这样的一个问题，手机的输入法软件盘会把定位到底部的盒子给顶起来。
造成这样页面布局变形的原因是，安卓手机中当用户获取input焦点时，软键盘弹出，会改变页面高度，将viewport值进行压缩。
后来我也有在网上查找一些解决方案，看到有的解决方案是，把bottom: 0; 改成通过 top值来进行定位，
那就要获取内容盒子的高
查了下uni-app的文档，它有封装自己的方法来获取，而不需要操作DOM
uni.getSystemInfo(object)
第一种, uni.getSystemInfo(object) 可以通过获取设备屏幕的高度来动态设置top值
export default {
data() {
return {
clientHight: '',
footerHight: ''
}
},
onReady() {
this.getClientHight();
},
methods: {
getClientHight() {
let that = this;
uni.getSystemInfo({
success(res) {
console.log(res.screenHeight); //获取手机设备屏幕高度
that.clientHight = res.screenHeight;
that.footerHight = that.clientHight * 0.1;
}
})
}
}
}
<template>
<view class="footer" :style="{top: clientHight - footerHight + 'px'}">
<view>
<text>我已阅读并同意</text>
<text class="argument" @tap="openRegAgreement">《注册协议》</text>
</view>
<navigator class="argument" url="">《隐私用户授权协议》</navigator>
</view>
</template>
这个方法还可以获取手机像素比以及其他设备信息
有兴趣可以去官方文档查阅 uni.getSystemInfo(OBJECT)
uni.createSelectorQuery()
这是第二种解决方案
调用这个方法，返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点，并使用boundingClientRect等方法选择需要查询的信息。
这里我从官方文档中复制了一些关于select方法的用法，顺便附上链接 uni.createSelectorQuery()
selector说明：
selector 类似于 CSS 的选择器，但仅支持下列语法。
ID选择器：
#the-idclass选择器（可以连续指定多个）：
.a-class.another-class子元素选择器：
.the-parent > .the-child后代选择器：
.the-ancestor .the-descendant跨自定义组件的后代选择器：
.the-ancestor >>> .the-descendant多选择器的并集：
#a-node, .some-other-nodes
export default {
data() {
return {
clientHight: '',
footerHight: ''
}
},
onReady() {
this.getClientHight();
},
methods: {
getClientHight() {
let that = this;
const query = uni.createSelectorQuery();
let view = query.select('.content');
view.boundingClientRect(data => {
console.log(data.height);//获取该元素的高度
that.clientHight = res.screenHeight;
that.footerHight = that.clientHight * 0.1;
}).exec();
}
}
}
<template>
<view class="footer" :style="{top: clientHight - footerHight + 'px'}">
<view>
<text>我已阅读并同意</text>
<text class="argument" @tap="openRegAgreement">《注册协议》</text>
</view>
<navigator class="argument" url="">《隐私用户授权协议》</navigator>
</view>
</template>
一些其他方法
在搜索解决方案的时候，看到还有一种方案就是监听input的 blur 事件。
当用户获取焦点时，将底部盒子动态设置为postion: static。
当用户失去焦点时，将底部盒子又设置回postion: absolte 或 fiexd
不过这个方式我没有试过，但具有一定的可行性，在这里提一下
总结
这是我第一篇技术博客，有些小激动٩(๑>◡<๑)۶
如果有哪些不足或错误的地方，欢迎前辈们指出哈...
最后忍不住附上一张我的女神图片： olive 小萝莉 嘻嘻嘻
