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-id

• class选择器（可以连续指定多个）：.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 小萝莉 嘻嘻嘻

image