安卓端 软键盘显隐时处理底部栏

src/components/BottomBar.vue

@@ -128,10 +128,10 @@ export default {
     ])
   },
   mounted() {
-    this.$msgCenter.subscribe('swkk-guide-bar-show', () => {
+    this.$msgCenter.subscribe('need-hide-bottom-bar', () => {
       this.ifMustHide = true
     })
-    this.$msgCenter.subscribe('swkk-guide-bar-hide', () => {
+    this.$msgCenter.subscribe('need-show-bottom-bar', () => {
       this.ifMustHide = false
     })
   },

src/main.js

@@ -23,6 +23,7 @@ document.body.appendChild(audioNode)
 
 const uaParser = new UAParser()
 const uaInfo = uaParser.getResult()
+console.log(uaInfo)
 Vue.prototype.$uaInfo = uaInfo
 if (uaInfo.browser && uaInfo.browser.name === 'WeChat') {
   Vue.prototype.$isWeChat = true
@@ -41,9 +42,25 @@ Vue.prototype.$msgCenter = new MessageCenter()
 const idealWindowInnerWidth = 1125 // 设计稿的宽度
 const idealRootFontSize = 24 // 设计稿里选择的根元素尺寸
 
+let windowWidthLast = window.innerWidth
+let windowHeightLast = window.innerHeight
+
 function onResize() {
   Vue.prototype.$oneRemToPx = window.innerWidth * idealRootFontSize / idealWindowInnerWidth
   document.documentElement.style.fontSize = Vue.prototype.$oneRemToPx + 'px'
+
+  if (window.innerWidth === windowWidthLast) {
+    // 发生了高度变化，认为发生了软键盘显隐
+    if (uaInfo.os.name === 'Android') {
+      if (window.innerHeight < windowHeightLast) {
+        Vue.prototype.$msgCenter.publish('need-hide-bottom-bar')
+      } else if (window.innerHeight > windowHeightLast) {
+        Vue.prototype.$msgCenter.publish('need-show-bottom-bar')
+      }
+    }
+  }
+  windowWidthLast = window.innerWidth
+  windowHeightLast = window.innerHeight
 }
 onResize()
 window.addEventListener('resize', () => {

src/views/SwkkView.vue

@@ -269,9 +269,9 @@ export default {
     isShowTourGuide: {
       handler(vNew) {
         if (vNew) {
-          this.$msgCenter.publish('swkk-guide-bar-show')
+          this.$msgCenter.publish('need-hide-bottom-bar')
         } else {
-          this.$msgCenter.publish('swkk-guide-bar-hide')
+          this.$msgCenter.publish('need-show-bottom-bar')
         }
       }
     }