uniApp 取安卓软键盘高度及设置

最新推荐文章于 2024-07-17 17:00:29 发布

原创

最新推荐文章于 2024-07-17 17:00:29 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

本文介绍了一种解决uniApp中安卓软键盘弹出导致页面内容上移问题的方法，通过视图和逻辑代码实现对软键盘高度的处理，确保内容不被遮挡。

1，业务需求，当手机输入内容时会弹出系统默认的软件盘，此时可能导致其他整体的页面内容上移而覆盖到工具栏或者软件盘直接覆盖了底部的部分内容；

要解决此问题，小编尝试了很多方法均不能完全解决，以下是小编用的最好的方法；

视图部分代码

<view>
<!-- #ifdef APP-PLUS -->
     <textarea maxlength="1000" 
			:adjust-position="false" 
			:show-confirm-bar ='false'
			:confirm-hold="true"
			:cursor-spacing="10" 
			:adjust-keyboard-to="'bottom'" 
			v-model="questionText"
			@focus="focusText($event)"
			@blur="blurText($event)" 
			@bindblur="blurText($event)"
			@bindkeyboardheightchange="blurTextComp($event)"
		></textarea>
<!-- #endif -->
<!-- #ifdef H5 -->
	<textarea maxlength="1000" v-model="questionText"></textarea>
<!-- #endif -->
</view>

逻辑部分代码

data(){
    return {
        windowHeight: '',
		topD: {'bottom': '0px'},
		scrollTop: 0,
		scrollview: '',
		style: { //内容可视区的设置
			pageHeight: 0,
			mitemHeight: 0,
			contentViewHeigh