uni-app 解决安卓端软键盘弹起布局错乱方案
当h5运行在安卓端的时候,点击input将会自动弹起软键盘,此时会将我们定位的元素向上挤,导致布局混乱,如下图究其原因,是因为软键盘弹起的时候会将最外层的dom的高度缩小为可视窗口的大小解决方案加载页面的时候,记录下该设备可视区域大小,点击input的时候,强制将最外层dom为记录下来的可视区域大小即可// html部分<view class="root":st...
当h5运行在安卓端的时候,点击input将会自动弹起软键盘,此时会将我们定位的元素向上挤,导致布局混乱,如下图
究其原因,是因为软键盘弹起的时候会将最外层的dom的高度缩小为可视窗口的大小
解决方案
加载页面的时候,记录下该设备可视区域大小,点击input的时候,强制将最外层dom为记录下来的可视区域大小即可
// html部分
<view class="root":style='"height: "+domHeight+"px;"'>
....
</view>
// data部分
domHeight: 0
// 点击input事件
Android() {
var that = this
setTimeout(function() { // 加上延时会使页面看起来更流畅
this.domHeight=document.documentElement.clientHeight
},1000)
}
// 记录下设备大小
mounted() {
this.domHeight = document.documentElement.clientHeight
}
更多推荐
所有评论(0)