在微信小程序移动端使用时,在一个uni-popup弹窗中,当input框获取焦点的时候@focus事件出发时,在键盘弹起时,怎么自动上推页面。
- 直接在input组件上配置adjust-position属性
<input :adjust-position="true" v-model="name" placeholder="请输入昵称" />
- 当配置完adjust-position属性后,自动上推页面的距离并不理想时,可采用计算键盘高度来增加popup弹出层里面包含块的高度
<template>
<view>
<buttom @click="open">打开弹窗</buttom>
<uni-popup ref="popup" type="bottom" :safe-area="false">
<view class="popup-box" :style="'height:'+height+'rpx;'">
<input class="textarea-box" :adjust-position="true" @focus="handleInputFocus" v-model="name"
@blur="handleInputBlur" placeholder-style="color:#888888" placeholder="请输入昵称" />
<button class="btn" @click="revamNickName">确定</button>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
name: '',
height: 744,
}
},
mounted() {
},
methods: {
open(){
this.$refs.popup.open('bottom')
},
handleInputFocus() {
if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
// console.log('运行在手机上');
// 计算键盘高度
const keyboardHeight = uni.getSystemInfoSync().windowHeight * 0.6;
this.height += keyboardHeight
// 设置弹窗距离底部的位置,使页面上推
}
},
revamNickName() {
console.log('修改===', this.name)
this.$refs.popup.close()
},
close() {
this.$refs.popup.close()
this.height = 744
},
handleInputBlur() {
// 还原弹窗距离底部的位置
this.height = 744
},
changePopup() {
this.close()
},
}
}
</script>