解决在小程序/H5上点击输入框键盘弹起后弹框显示不全问题@令狐张豪

要实现的效果图：

解决思路：

1. 先禁止input键盘弹起时，是否自动上推页面；
2. 点击input的时候获取键盘弹起来的高度；
3. 把获取出来的高度赋值到弹框的margin-bottom上；
4. 键盘失焦或弹框关闭的时候让弹框的margin-bottom恢复为0。

<uni-popup ref="popup" type="bottom" @change="popupChange">
	<view class="popup-content" :style="marginBottom"></view>
</uni-popup>

<input type="number" value="" v-model="xioaban" @focus="inputfocus"
							@blur="inputBlur" :adjust-position="false" />

data() {
	return {
		marginBottom: 0,
	}
},
methods:{
	//获取焦点的时候
	inputfocus(e) {
	    console.log(e.detail)
		this.marginBottom = 'margin-bottom:' + e.detail.height * 2 + 'rpx'; //我这里是小程序所以x2了
	},
	//失焦的时候
	inputBlur() {
		this.marginBottom = 'margin-bottom:0';
	},
	//弹窗关闭的时候
	popupChange(){
		this.marginBottom = 'margin-bottom:0';
	}
}

---

end~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！
文章对您有所帮助请给作者点个赞支持下，谢谢~