当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
        }

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐