uniapp中u-popup弹窗之后，输入框自动聚焦，阻止键盘上推页面，自定义上推距离

---

前言

下面案例仅供参考。

---

以下是本篇文章正文内容，下面案例可供参考

1.设置自动聚焦属性focus

代码如下（示例）：

<template>
	<u-popup v-model="popVisible" mode="bottom" border-radius="32" closeab @close="hide">
		<input class="input" :border="border" input-align="left" :focus="isFocus"
			:value="input" />
	</u-popup>
</template>
<script>
export default {
	data() {
		return {
			popVisible: false,
			isFocus: false,
			input: ``,
		}
	},
	methods: {
		show() {
			// 测试部分场景需要延迟一点再将focus属性变为true，不然可能自动聚焦失效
			let timer = setTimeout(() => {
                this.isFocus = true;
                clearTimeout(timer);
                timer = null;
            }, 200);
            this.popVisible= true;
		}
	}
 }
</script>

2.设置键盘不上推页面属性adjustPosition

代码如下（示例）：

<template>
	<u-popup v-model="popVisible" mode="bottom" border-radius="32" closeab @close="hide">
		<input class="input" :border="border" input-align="left" :focus="isFocus"
			:adjustPosition="false" :value="input" />
	</u-popup>
</template>

此时弹窗弹出时，输入框会自动聚焦并且不会将页面向上推了。我们可以设置一个自己的元素去将页面撑到自己想要的高度。

3.自定义元素撑开页面高度

<template>
	<u-popup v-model="popVisible" mode="bottom" border-radius="32" closeab @close="hide">
		<input class="input" :border="border" input-align="left" :focus="isFocus"
			:adjustPosition="false" :value="input" />
		<view class="bottom-box" :style="{ height: `${bottomHeight}rpx` }"></view>
	</u-popup>
</template>

<script>
export default {
	data() {
		return {
			popVisible: false,
			isFocus: false,
			bottomHeight: 0,
			systemBottom : 0,
			input: ``,
		}
	},
	mounted() {
        let _this = this;
        // 监听键盘高度变化
        uni.onKeyboardHeightChange(this.onKey);
        // 获取系统底部虚拟按键高度
        uni.getSystemInfo({
            success(e) {
                console.log('参数', e.safeAreaInsets);
                if (e && e.safeAreaInsets && e.safeAreaInsets.bottom) {
                    _this.systemBottom = e.safeAreaInsets.bottom;
                }
            }
        })
    },
    destroyed() {
        uni.offKeyboardHeightChange();
    },
	methods: {
		show() {
			// 测试部分场景需要延迟一点再将focus属性变为true，不然可能自动聚焦失效
			let timer = setTimeout(() => {
                this.isFocus = true;
                clearTimeout(timer);
                timer = null;
            }, 200);
            this.popVisible= true;
		},
		onKey(e) {
            // console.log('键盘高度改变', e)
            if (e.height) {
                this.bottomHeight = e.height * 2 - (this.systemBottom * 2);
                // console.log('键盘打开', 'this.bottomHeight', this.bottomHeight);
            } else {
                // console.log('键盘关闭');
                this.bottomHeight = 0;
            }
        },
        hide() {
        	// 弹窗关闭时，关闭键盘
            uni.hideKeyboard();
            this.isFocus = false;
            this.bottomHeight = 0;
            this.popVisible= false;
            this.input= ``;
        },
	}
 }
</script>

<style>
.bottom-box {
	width: 100%;
}
</style>

---

总结

设置自动聚焦属性focus，并且延迟设置为true。设置键盘不上推页面属性adjustPosition为false。
最后通过监听键盘高度的改变，动态设置自定义的元素的高度将页面撑开到想要的高度。