fix(h5): 修复Taro.showModal浏览器退回到上一页面不消失和遮罩层滚动透传问题 (#13835)

* fix(h5-router): 修复H5浏览器在后退时，current未更新问题 * fix(h5-api): showModal弹窗滚动透传问题修复 * style: eslint问题处理 * style: eslint问题处理 * fix(router): 修复路由变更事件触发时机 --------- Co-authored-by: ZakaryCode <[email protected]>
NervJS · May 29, 2023 · 6635e19 · 6635e19
1 parent b4d8279
commit 6635e19
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/packages/taro-h5/src/api/ui/interaction/modal.ts b/packages/taro-h5/src/api/ui/interaction/modal.ts
@@ -88,15 +88,20 @@ export default class Modal {
       this.el.style.opacity = '0'
       this.el.style.transition = 'opacity 0.2s linear'
 
+      const eventHandler = (e) => {
+        e.stopPropagation()
+        e.preventDefault()
+      }
       // mask
       const mask = document.createElement('div')
       mask.className = 'taro-modal__mask'
       mask.setAttribute('style', inlineStyle(maskStyle))
-
+      mask.ontouchmove = eventHandler
       // modal
       const modal = document.createElement('div')
       modal.className = 'taro-modal__content'
       modal.setAttribute('style', inlineStyle(modalStyle))
+      modal.ontouchmove = eventHandler
 
       // title
       const titleCSS = config.title ? titleStyle : {

diff --git a/packages/taro-router/src/router/page.ts b/packages/taro-router/src/router/page.ts
@@ -1,5 +1,5 @@
 /* eslint-disable dot-notation */
-import { Current, PageInstance, requestAnimationFrame } from '@tarojs/runtime'
+import { Current, eventCenter, PageInstance, requestAnimationFrame } from '@tarojs/runtime'
 import queryString from 'query-string'
 
 import { loadAnimateStyle } from '../animation'
@@ -194,6 +194,7 @@ export default class PageHandler {
       this.addAnimation(pageEl, pageNo === 0)
       page.onShow?.()
       this.bindPageEvents(page, pageEl, pageConfig)
+      this.triggerRouterChange()
     } else {
       page.onLoad?.(param, () => {
         pageEl = this.getPageContainer(page)
@@ -202,6 +203,7 @@ export default class PageHandler {
         this.onReady(page, true)
         page.onShow?.()
         this.bindPageEvents(page, pageEl, pageConfig)
+        this.triggerRouterChange()
       })
     }
   }
@@ -248,13 +250,15 @@ export default class PageHandler {
       this.addAnimation(pageEl, pageNo === 0)
       page.onShow?.()
       this.bindPageEvents(page, pageEl, pageConfig)
+      this.triggerRouterChange()
     } else {
       page.onLoad?.(param, () => {
         pageEl = this.getPageContainer(page)
         this.addAnimation(pageEl, pageNo === 0)
         this.onReady(page, false)
         page.onShow?.()
         this.bindPageEvents(page, pageEl, pageConfig)
+        this.triggerRouterChange()
       })
     }
   }
@@ -318,4 +322,18 @@ export default class PageHandler {
     bindPageScroll(page, pageEl, distance)
     bindPageResize(page)
   }
+
+  triggerRouterChange () {
+    /**
+     * @tarojs/runtime 中生命周期跑在 promise 中，所以这里需要 setTimeout 延迟事件调用
+     * TODO 考虑将生命周期返回 Promise，用于处理相关事件调用顺序
+     */
+    setTimeout(() => {
+      eventCenter.trigger('__afterTaroRouterChange', {
+        toLocation: {
+          path: this.pathname
+        }
+      })
+    }, 0)
+  }
 }
diff --git a/packages/taro-router/src/router/spa.ts b/packages/taro-router/src/router/spa.ts
@@ -180,12 +180,6 @@ export function createRouter (
       if (params) page.options = params
       handler.load(page, pageConfig, pageStampId, stacksIndex)
     }
-
-    eventCenter.trigger('__afterTaroRouterChange', {
-      toLocation: {
-        path: handler.pathname
-      }
-    })
   }
 
   const routePath = addLeadingSlash(stripBasename(history.location.pathname, handler.basename))