2022-08-17 uniapp开发安卓端h5软键盘弹起挡住原来的视图解决方案

解决方法:可以通过监听移动端软键盘弹起
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。

true,表示元素的顶部与当前区域的可见部分的顶部对齐
false,表示元素的底部与当前区域的可见部分的尾部对齐
Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。此方法是标准的Element.scrollIntoView()方法的专有变体。

data() {
    let systemInfo = uni.getSystemInfoSync()
    let navBarHeight = systemInfo.statusBarHeight + 44//头部导航栏高度
    let scrollHeight = systemInfo.windowHeight - navBarHeight - uni.upx2px(92)//滚动区域高度
    let otherHeight = navBarHeight + uni.upx2px(92)
    return {
        otherHeight,
        scrollHeight,
    }
 }
window.addEventListener('resize', function() {
this.scrollHeight = window.innerHeight - this.otherHeight//当软键盘弹出的时候会把整个页面顶起,这时候整个窗体的高度是变小的,如果不重新计算滚动区域的高度的话,滚动区域是在窗口之外被遮挡的,所以这时候要重新计算页面滚动区域的高度
  if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {//滚动到当前元素的方法
    window.setTimeout(function() {
      if ('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView(false)
      } else {
        document.activeElement.scrollIntoViewIfNeeded(false)
      }
    }, 0)
  }
})
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容