diff --git a/packages/uni-components/src/helpers/useSubscribe.ts b/packages/uni-components/src/helpers/useSubscribe.ts
index 897ff6eb289167594959f851b0256632ec5d25d4..7c070d4d10b3314a11e9cbb11a0565ce4ac6b018 100644
--- a/packages/uni-components/src/helpers/useSubscribe.ts
+++ b/packages/uni-components/src/helpers/useSubscribe.ts
@@ -62,3 +62,8 @@ export function useSubscribe(
     removeSubscribe(name || normalizeEvent(pageId, vm)!)
   })
 }
+
+export function useOn(name: string, callback: (...args: any[]) => any) {
+  onMounted(() => UniViewJSBridge.on(name, callback))
+  onBeforeUnmount(() => UniViewJSBridge.off(name))
+}
diff --git a/packages/uni-components/src/index.ts b/packages/uni-components/src/index.ts
index 0f6d4590bf8f5007a37f4b66864b35d38e794e68..852361c7ce1c4467aa426e656655c94122d56555 100644
--- a/packages/uni-components/src/index.ts
+++ b/packages/uni-components/src/index.ts
@@ -1,3 +1,3 @@
 export * from './components'
-export { useSubscribe } from './helpers/useSubscribe'
+export { useOn, useSubscribe } from './helpers/useSubscribe'
 export { useCustomEvent } from './helpers/useEvent'
diff --git a/packages/uni-h5/dist/uni-h5.esm.js b/packages/uni-h5/dist/uni-h5.esm.js
index a08ecc3ba4b52f87ff2d4b71e2be6bfe4782a1c4..ba31bfb43fedfb4e0c9fd6722046a650383abda4 100644
--- a/packages/uni-h5/dist/uni-h5.esm.js
+++ b/packages/uni-h5/dist/uni-h5.esm.js
@@ -1198,7 +1198,7 @@ function removePage(routeKey, removeRouteCaches = true) {
   currentPagesMap.delete(routeKey);
   removeRouteCaches && removeRouteCache(routeKey);
 }
-let id = history.state && history.state.__id__ || 1;
+let id = /* @__PURE__ */ (() => history.state && history.state.__id__ || 1)();
 function createPageState(type, __id__) {
   return {
     __id__: __id__ || ++id,
@@ -7544,12 +7544,10 @@ const props = {
     }
   }
 };
-var index$3 = defineComponent({
+var index$3 = /* @__PURE__ */ defineComponent({
   name: "Progress",
   props,
-  setup(props2, {
-    attrs: attrs2
-  }) {
+  setup(props2) {
     const state = useProgressState(props2);
     _activeAnimation(state, props2);
     watch(() => state.realPercent, (newValue, oldValue) => {
@@ -9935,6 +9933,10 @@ function useSubscribe(callback, name) {
     removeSubscribe(name || normalizeEvent(pageId, vm));
   });
 }
+function useOn(name, callback) {
+  onMounted(() => UniViewJSBridge.on(name, callback));
+  onBeforeUnmount(() => UniViewJSBridge.off(name));
+}
 const passiveOptions = passive(false);
 const GestureType = {
   NONE: "none",
@@ -10105,6 +10107,11 @@ const _sfc_main$3 = {
       this.updateProgress();
     },
     buffered(buffered) {
+      if (buffered !== 0) {
+        this.$trigger("progress", {}, {
+          buffered
+        });
+      }
     }
   },
   setup() {
@@ -12968,54 +12975,58 @@ function usePageHeadTransparentBackgroundColor(backgroundColor) {
   const {r, g: g2, b} = hexToRgba(backgroundColor);
   return `rgba(${r},${g2},${b},0)`;
 }
-function usePageHeadTransparent(headRef, {titleColor, coverage, backgroundColor}) {
+function usePageHeadTransparent(headRef, {
+  id: id2,
+  navigationBar: {titleColor, coverage, backgroundColor}
+}) {
   let A = 0;
   const rgb = computed(() => hexToRgba(backgroundColor));
   const offset = parseInt(coverage);
+  let titleElem;
+  let transparentElemStyle;
+  const iconElemsStyles = [];
+  const borderRadiusElemsStyles = [];
+  const oldColors = [];
   onMounted(() => {
     const $el = headRef.value;
-    const transparentElemStyle = $el.style;
-    const titleElem = $el.querySelector(".uni-page-head__title");
+    transparentElemStyle = $el.style;
+    titleElem = $el.querySelector(".uni-page-head__title");
     const borderRadiusElems = $el.querySelectorAll(".uni-page-head-btn");
     const iconElems = $el.querySelectorAll(".uni-btn-icon");
-    const iconElemsStyles = [];
     for (let i2 = 0; i2 < iconElems.length; i2++) {
       iconElemsStyles.push(iconElems[i2].style);
     }
-    const oldColors = [];
-    const borderRadiusElemsStyles = [];
     for (let i2 = 0; i2 < borderRadiusElems.length; i2++) {
       const borderRadiusElem = borderRadiusElems[i2];
       oldColors.push(getComputedStyle(borderRadiusElem).backgroundColor);
       borderRadiusElemsStyles.push(borderRadiusElem.style);
     }
-    A = 0;
-    UniViewJSBridge.on("onPageScroll", ({scrollTop}) => {
-      const alpha = Math.min(scrollTop / offset, 1);
-      if (alpha === 1 && A === 1) {
-        return;
-      }
-      if (alpha > 0.5 && A <= 0.5) {
-        iconElemsStyles.forEach(function(iconElemStyle) {
-          iconElemStyle.color = titleColor;
-        });
-      } else if (alpha <= 0.5 && A > 0.5) {
-        iconElemsStyles.forEach(function(iconElemStyle) {
-          iconElemStyle.color = "#fff";
-        });
-      }
-      A = alpha;
-      if (titleElem) {
-        titleElem.style.opacity = alpha;
-      }
-      const bg = rgb.value;
-      transparentElemStyle.backgroundColor = `rgba(${bg.r},${bg.g},${bg.b},${alpha})`;
-      borderRadiusElemsStyles.forEach(function(borderRadiusElemStyle, index2) {
-        const oldColor = oldColors[index2];
-        const rgba = oldColor.match(/[\d+\.]+/g);
-        rgba[3] = (1 - alpha) * (rgba.length === 4 ? rgba[3] : 1);
-        borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`;
+  });
+  useOn(id2 + ".onPageScroll", ({scrollTop}) => {
+    const alpha = Math.min(scrollTop / offset, 1);
+    if (alpha === 1 && A === 1) {
+      return;
+    }
+    if (alpha > 0.5 && A <= 0.5) {
+      iconElemsStyles.forEach(function(iconElemStyle) {
+        iconElemStyle.color = titleColor;
       });
+    } else if (alpha <= 0.5 && A > 0.5) {
+      iconElemsStyles.forEach(function(iconElemStyle) {
+        iconElemStyle.color = "#fff";
+      });
+    }
+    A = alpha;
+    if (titleElem) {
+      titleElem.style.opacity = alpha;
+    }
+    const bg = rgb.value;
+    transparentElemStyle.backgroundColor = `rgba(${bg.r},${bg.g},${bg.b},${alpha})`;
+    borderRadiusElemsStyles.forEach(function(borderRadiusElemStyle, index2) {
+      const oldColor = oldColors[index2];
+      const rgba = oldColor.match(/[\d+\.]+/g);
+      rgba[3] = (1 - alpha) * (rgba.length === 4 ? rgba[3] : 1);
+      borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`;
     });
   });
 }
@@ -13036,14 +13047,14 @@ var PageHead = /* @__PURE__ */ defineComponent({
     const headRef = ref(null);
     const pageMeta = usePageMeta();
     const navigationBar = pageMeta.navigationBar;
-    UniServiceJSBridge.emit("onNavigationBarChange", navigationBar.titleText);
     const {
       clazz,
       style
     } = usePageHead(navigationBar);
     const buttons = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__ && usePageHeadButtons(navigationBar);
-    const searchInput = __UNI_FEATURE_NAVIGATIONBAR_SEARCHINPUT__ && usePageHeadSearchInput();
-    __UNI_FEATURE_NAVIGATIONBAR_TRANSPARENT__ && usePageHeadTransparent(headRef, navigationBar);
+    const searchInput = __UNI_FEATURE_NAVIGATIONBAR_SEARCHINPUT__ && navigationBar.searchInput && usePageHeadSearchInput(pageMeta);
+    __UNI_FEATURE_NAVIGATIONBAR_TRANSPARENT__ && navigationBar.type === "transparent";
+    usePageHeadTransparent(headRef, pageMeta);
     return () => {
       const backButtonTsx = __UNI_FEATURE_PAGES__ ? createBackButtonTsx(pageMeta) : null;
       const leftButtonsTsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__ ? createButtonsTsx(buttons.left) : [];
@@ -13131,7 +13142,9 @@ function createPageHeadSearchInputTsx(navigationBar, {
   composing,
   onBlur,
   onFocus,
-  onInput
+  onInput,
+  onKeyup,
+  onClick
 }) {
   const {
     color,
@@ -13158,9 +13171,19 @@ function createPageHeadSearchInputTsx(navigationBar, {
     class: placeholderClass
   }, [createVNode("div", {
     class: "uni-page-head-search-icon"
-  }, [createSvgIconVNode(ICON_PATH_SEARCH, placeholderColor, 20)]), text2.value || composing.value ? "" : placeholder], 6), createVNode(_sfc_main$f, {
+  }, [createSvgIconVNode(ICON_PATH_SEARCH, placeholderColor, 20)]), text2.value || composing.value ? "" : placeholder], 6), disabled ? createVNode(_sfc_main$f, {
+    disabled: true,
+    style: {
+      color
+    },
+    "placeholder-style": {
+      color: placeholderColor
+    },
+    class: "uni-page-head-search-input",
+    "confirm-type": "search",
+    onClick
+  }, null, 8, ["style", "placeholder-style", "onClick"]) : createVNode(_sfc_main$f, {
     focus: autoFocus,
-    disabled,
     style: {
       color
     },
@@ -13171,8 +13194,9 @@ function createPageHeadSearchInputTsx(navigationBar, {
     "confirm-type": "search",
     onFocus,
     onBlur,
-    onInput
-  }, null, 8, ["focus", "disabled", "style", "placeholder-style", "onFocus", "onBlur", "onInput"])], 4);
+    onInput,
+    onKeyup
+  }, null, 8, ["focus", "style", "placeholder-style", "onFocus", "onBlur", "onInput", "onKeyup"])], 4);
 }
 function onPageHeadBackButton() {
   if (getCurrentPages().length === 1) {
@@ -13278,26 +13302,62 @@ function usePageHeadButton(btn, isTransparent) {
     iconStyle
   };
 }
-function usePageHeadSearchInput(navigationBar) {
+function usePageHeadSearchInput({
+  id: id2,
+  navigationBar: {
+    searchInput
+  }
+}) {
   const focus = ref(false);
   const text2 = ref("");
   const composing = ref(false);
-  function onFocus() {
-    focus.value = true;
+  const {
+    disabled
+  } = searchInput;
+  if (disabled) {
+    const onClick = () => {
+      invokeHook(id2, "onNavigationBarSearchInputClicked");
+    };
+    return {
+      focus,
+      text: text2,
+      composing,
+      onClick
+    };
   }
-  function onBlur() {
+  const onFocus = () => {
+    focus.value = true;
+    invokeHook(id2, "onNavigationBarSearchInputFocusChanged", {
+      focus: true
+    });
+  };
+  const onBlur = () => {
     focus.value = false;
-  }
-  function onInput(evt) {
+    invokeHook(id2, "onNavigationBarSearchInputFocusChanged", {
+      focus: false
+    });
+  };
+  const onInput = (evt) => {
     text2.value = evt.detail.value;
-  }
+    invokeHook(id2, "onNavigationBarSearchInputChanged", {
+      text: text2.value
+    });
+  };
+  const onKeyup = (evt) => {
+    if (evt.key === "Enter" || evt.keyCode === 13) {
+      invokeHook(id2, "onNavigationBarSearchInputConfirmed", {
+        text: text2.value
+      });
+    }
+  };
   return {
     focus,
     text: text2,
     composing,
     onFocus,
     onBlur,
-    onInput
+    onInput,
+    onKeyup
   };
 }
 var _sfc_main$2 = {
@@ -13620,4 +13680,4 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 _sfc_main.render = _sfc_render;
-export {_sfc_main$1 as AsyncErrorComponent, _sfc_main as AsyncLoadingComponent, _sfc_main$k as Audio, index$6 as Button, _sfc_main$j as Canvas, _sfc_main$i as Checkbox, _sfc_main$h as CheckboxGroup, _sfc_main$g as Editor, index$7 as Form, index$5 as Icon, index$4 as Image, _sfc_main$f as Input, _sfc_main$e as Label, LayoutComponent, _sfc_main$d as MovableView, _sfc_main$c as Navigator, index as PageComponent, index$3 as Progress, _sfc_main$b as Radio, _sfc_main$a as RadioGroup, ResizeSensor, _sfc_main$9 as RichText, _sfc_main$8 as ScrollView, _sfc_main$7 as Slider, _sfc_main$6 as SwiperItem, _sfc_main$5 as Switch, index$2 as Text, _sfc_main$4 as Textarea, UniServiceJSBridge$1 as UniServiceJSBridge, UniViewJSBridge$1 as UniViewJSBridge, _sfc_main$3 as Video, index$1 as View, addInterceptor, arrayBufferToBase64, base64ToArrayBuffer, canIUse, chooseFile, chooseImage, chooseVideo, clearStorage, clearStorageSync, closeSocket, connectSocket, createInnerAudioContext, createIntersectionObserver, createSelectorQuery, createVideoContext, cssBackdropFilter, cssConstant, cssEnv, cssVar, downloadFile, getApp$1 as getApp, getCurrentPages$1 as getCurrentPages, getFileInfo, getImageInfo, getLocation, getNetworkType, getStorage, getStorageInfo, getStorageInfoSync, getStorageSync, getSystemInfo, getSystemInfoSync, getVideoInfo, hideKeyboard, hideLoading, hideNavigationBarLoading, hideTabBar, hideTabBarRedDot, hideToast, loadFontFace, makePhoneCall, navigateBack, navigateTo, offAccelerometerChange, offCompassChange, offNetworkStatusChange, onAccelerometerChange, onCompassChange, onNetworkStatusChange, onSocketClose, onSocketError, onSocketMessage, onSocketOpen, onTabBarMidButtonTap, openDocument, pageScrollTo, index$8 as plugin, promiseInterceptor, reLaunch, redirectTo, removeInterceptor, removeStorage, removeStorageSync, removeTabBarBadge, request, sendSocketMessage, setNavigationBarColor, setNavigationBarTitle, setStorage, setStorageSync, setTabBarBadge, setTabBarItem, setTabBarStyle, setupApp, setupPage, showActionSheet, showLoading, showModal, showNavigationBarLoading, showTabBar, showTabBarRedDot, showToast, startAccelerometer, startCompass, startPullDownRefresh, stopAccelerometer, stopCompass, stopPullDownRefresh, switchTab, uni$1 as uni, uploadFile, upx2px, useCustomEvent, usePageRoute, useSubscribe, vibrateLong, vibrateShort};
+export {_sfc_main$1 as AsyncErrorComponent, _sfc_main as AsyncLoadingComponent, _sfc_main$k as Audio, index$6 as Button, _sfc_main$j as Canvas, _sfc_main$i as Checkbox, _sfc_main$h as CheckboxGroup, _sfc_main$g as Editor, index$7 as Form, index$5 as Icon, index$4 as Image, _sfc_main$f as Input, _sfc_main$e as Label, LayoutComponent, _sfc_main$d as MovableView, _sfc_main$c as Navigator, index as PageComponent, index$3 as Progress, _sfc_main$b as Radio, _sfc_main$a as RadioGroup, ResizeSensor, _sfc_main$9 as RichText, _sfc_main$8 as ScrollView, _sfc_main$7 as Slider, _sfc_main$6 as SwiperItem, _sfc_main$5 as Switch, index$2 as Text, _sfc_main$4 as Textarea, UniServiceJSBridge$1 as UniServiceJSBridge, UniViewJSBridge$1 as UniViewJSBridge, _sfc_main$3 as Video, index$1 as View, addInterceptor, arrayBufferToBase64, base64ToArrayBuffer, canIUse, chooseFile, chooseImage, chooseVideo, clearStorage, clearStorageSync, closeSocket, connectSocket, createInnerAudioContext, createIntersectionObserver, createSelectorQuery, createVideoContext, cssBackdropFilter, cssConstant, cssEnv, cssVar, downloadFile, getApp$1 as getApp, getCurrentPages$1 as getCurrentPages, getFileInfo, getImageInfo, getLocation, getNetworkType, getStorage, getStorageInfo, getStorageInfoSync, getStorageSync, getSystemInfo, getSystemInfoSync, getVideoInfo, hideKeyboard, hideLoading, hideNavigationBarLoading, hideTabBar, hideTabBarRedDot, hideToast, loadFontFace, makePhoneCall, navigateBack, navigateTo, offAccelerometerChange, offCompassChange, offNetworkStatusChange, onAccelerometerChange, onCompassChange, onNetworkStatusChange, onSocketClose, onSocketError, onSocketMessage, onSocketOpen, onTabBarMidButtonTap, openDocument, pageScrollTo, index$8 as plugin, promiseInterceptor, reLaunch, redirectTo, removeInterceptor, removeStorage, removeStorageSync, removeTabBarBadge, request, sendSocketMessage, setNavigationBarColor, setNavigationBarTitle, setStorage, setStorageSync, setTabBarBadge, setTabBarItem, setTabBarStyle, setupApp, setupPage, showActionSheet, showLoading, showModal, showNavigationBarLoading, showTabBar, showTabBarRedDot, showToast, startAccelerometer, startCompass, startPullDownRefresh, stopAccelerometer, stopCompass, stopPullDownRefresh, switchTab, uni$1 as uni, uploadFile, upx2px, useCustomEvent, useOn, usePageRoute, useSubscribe, vibrateLong, vibrateShort};
diff --git a/packages/uni-h5/src/framework/components/page/pageHead.tsx b/packages/uni-h5/src/framework/components/page/pageHead.tsx
index 0f6a27fb4baa618641041eb508b527a10b1350aa..cf5f9fb6246fdeae7545c7649412f2f4230a6f5a 100644
--- a/packages/uni-h5/src/framework/components/page/pageHead.tsx
+++ b/packages/uni-h5/src/framework/components/page/pageHead.tsx
@@ -2,7 +2,11 @@ import { computed, defineComponent, Ref, ref } from 'vue'
 import { isArray } from '@vue/shared'
 import { Input } from '@dcloudio/uni-components'
 import { getRealPath } from '@dcloudio/uni-platform'
-import { ICON_PATH_SEARCH, createSvgIconVNode } from '@dcloudio/uni-core'
+import {
+  ICON_PATH_SEARCH,
+  createSvgIconVNode,
+  invokeHook,
+} from '@dcloudio/uni-core'
 import { usePageMeta } from '../../plugin/provide'
 import {
   usePageHeadTransparent,
@@ -37,14 +41,16 @@ export default /*#__PURE__*/ defineComponent({
     const headRef = ref(null)
     const pageMeta = usePageMeta()
     const navigationBar = pageMeta.navigationBar
-    UniServiceJSBridge.emit('onNavigationBarChange', navigationBar.titleText)
+    // UniServiceJSBridge.emit('onNavigationBarChange', navigationBar.titleText)
     const { clazz, style } = usePageHead(navigationBar)
     const buttons = (__UNI_FEATURE_NAVIGATIONBAR_BUTTONS__ &&
       usePageHeadButtons(navigationBar)) as PageHeadButtons
     const searchInput = (__UNI_FEATURE_NAVIGATIONBAR_SEARCHINPUT__ &&
-      usePageHeadSearchInput(navigationBar)) as PageHeadSearchInput
+      navigationBar.searchInput &&
+      usePageHeadSearchInput(pageMeta)) as PageHeadSearchInput
     __UNI_FEATURE_NAVIGATIONBAR_TRANSPARENT__ &&
-      usePageHeadTransparent(headRef, navigationBar)
+      navigationBar.type === 'transparent'
+    usePageHeadTransparent(headRef, pageMeta)
     return () => {
       // 单页面无需back按钮
       const backButtonTsx = __UNI_FEATURE_PAGES__
@@ -161,7 +167,16 @@ function createPageHeadTitleTextTsx({
 
 function createPageHeadSearchInputTsx(
   navigationBar: UniApp.PageNavigationBar,
-  { text, focus, composing, onBlur, onFocus, onInput }: PageHeadSearchInput
+  {
+    text,
+    focus,
+    composing,
+    onBlur,
+    onFocus,
+    onInput,
+    onKeyup,
+    onClick,
+  }: PageHeadSearchInput
 ) {
   const {
     color,
@@ -191,17 +206,28 @@ function createPageHeadSearchInputTsx(
         </div>
         {text.value || composing.value ? '' : placeholder}
       </div>
-      <Input
-        focus={autoFocus}
-        disabled={disabled}
-        style={{ color }}
-        placeholder-style={{ color: placeholderColor }}
-        class="uni-page-head-search-input"
-        confirm-type="search"
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onInput={onInput}
-      />
+      {disabled ? (
+        <Input
+          disabled={true}
+          style={{ color }}
+          placeholder-style={{ color: placeholderColor }}
+          class="uni-page-head-search-input"
+          confirm-type="search"
+          onClick={onClick}
+        />
+      ) : (
+        <Input
+          focus={autoFocus}
+          style={{ color }}
+          placeholder-style={{ color: placeholderColor }}
+          class="uni-page-head-search-input"
+          confirm-type="search"
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onInput={onInput}
+          onKeyup={onKeyup}
+        />
+      )}
     </div>
   )
 }
@@ -329,27 +355,45 @@ function usePageHeadButton(
   }
 }
 
-interface PageHeadSearchInput {
-  focus: Ref<boolean>
-  text: Ref<string>
-  composing: Ref<boolean>
-  onFocus: () => void
-  onBlur: () => void
-  onInput: (evt: { detail: { value: string } }) => void
-}
+type PageHeadSearchInput = ReturnType<typeof usePageHeadSearchInput>
 
-function usePageHeadSearchInput(navigationBar: UniApp.PageNavigationBar) {
+function usePageHeadSearchInput({
+  id,
+  navigationBar: { searchInput },
+}: UniApp.PageRouteMeta) {
   const focus = ref(false)
   const text = ref('')
   const composing = ref(false)
-  function onFocus() {
+  const { disabled } = searchInput!
+  if (disabled) {
+    const onClick = () => {
+      invokeHook(id, 'onNavigationBarSearchInputClicked')
+    }
+    return {
+      focus,
+      text,
+      composing,
+      onClick,
+    }
+  }
+  const onFocus = () => {
     focus.value = true
+    invokeHook(id, 'onNavigationBarSearchInputFocusChanged', { focus: true })
   }
-  function onBlur() {
+  const onBlur = () => {
     focus.value = false
+    invokeHook(id, 'onNavigationBarSearchInputFocusChanged', { focus: false })
   }
-  function onInput(evt: { detail: { value: string } }) {
+  const onInput = (evt: { detail: { value: string } }) => {
     text.value = evt.detail.value
+    invokeHook(id, 'onNavigationBarSearchInputChanged', { text: text.value })
+  }
+  const onKeyup = (evt: KeyboardEvent) => {
+    if (evt.key === 'Enter' || evt.keyCode === 13) {
+      invokeHook(id, 'onNavigationBarSearchInputConfirmed', {
+        text: text.value,
+      })
+    }
   }
   return {
     focus,
@@ -358,5 +402,6 @@ function usePageHeadSearchInput(navigationBar: UniApp.PageNavigationBar) {
     onFocus,
     onBlur,
     onInput,
+    onKeyup,
   }
 }
diff --git a/packages/uni-h5/src/framework/components/page/transparent.ts b/packages/uni-h5/src/framework/components/page/transparent.ts
index b633de29dcd4ca10f4570a12b5242433811aacc1..fea5e2ba3c8adbd0d58d6b62ced75e4acdf250d2 100644
--- a/packages/uni-h5/src/framework/components/page/transparent.ts
+++ b/packages/uni-h5/src/framework/components/page/transparent.ts
@@ -1,4 +1,5 @@
 import { computed, onMounted, Ref } from 'vue'
+import { useOn } from '@dcloudio/uni-components'
 import { hexToRgba } from '../../../helpers/hexToRgba'
 
 export function usePageHeadTransparentBackgroundColor(backgroundColor: string) {
@@ -8,70 +9,65 @@ export function usePageHeadTransparentBackgroundColor(backgroundColor: string) {
 
 export function usePageHeadTransparent(
   headRef: Ref<null>,
-  { titleColor, coverage, backgroundColor }: UniApp.PageNavigationBar
+  {
+    id,
+    navigationBar: { titleColor, coverage, backgroundColor },
+  }: UniApp.PageRouteMeta
 ) {
   let A = 0
   const rgb = computed(() => hexToRgba(backgroundColor!))
-
   const offset = parseInt(coverage!)
+  let titleElem: HTMLDivElement
+  let transparentElemStyle: CSSStyleDeclaration
+  const iconElemsStyles: CSSStyleDeclaration[] = []
+  const borderRadiusElemsStyles: CSSStyleDeclaration[] = []
+  const oldColors: string[] = []
   onMounted(() => {
     const $el = (headRef.value as unknown) as HTMLDivElement
-    const transparentElemStyle = $el.style
-    const titleElem = $el.querySelector(
-      '.uni-page-head__title'
-    ) as HTMLDivElement
+    transparentElemStyle = $el.style
+    titleElem = $el.querySelector('.uni-page-head__title')!
     const borderRadiusElems = $el.querySelectorAll(
       '.uni-page-head-btn'
     ) as NodeListOf<HTMLElement>
     const iconElems = $el.querySelectorAll(
       '.uni-btn-icon'
     ) as NodeListOf<HTMLElement>
-    const iconElemsStyles: CSSStyleDeclaration[] = []
     for (let i = 0; i < iconElems.length; i++) {
       iconElemsStyles.push(iconElems[i].style)
     }
-    const oldColors: string[] = []
-    const borderRadiusElemsStyles: CSSStyleDeclaration[] = []
     for (let i = 0; i < borderRadiusElems.length; i++) {
       const borderRadiusElem = borderRadiusElems[i]
       oldColors.push(getComputedStyle(borderRadiusElem).backgroundColor)
       borderRadiusElemsStyles.push(borderRadiusElem.style)
     }
-    A = 0
-    UniViewJSBridge.on(
-      'onPageScroll',
-      ({ scrollTop }: { scrollTop: number }) => {
-        const alpha = Math.min(scrollTop / offset, 1)
-        if (alpha === 1 && A === 1) {
-          return
-        }
-        if (alpha > 0.5 && A <= 0.5) {
-          iconElemsStyles.forEach(function (iconElemStyle) {
-            iconElemStyle.color = titleColor!
-          })
-        } else if (alpha <= 0.5 && A > 0.5) {
-          iconElemsStyles.forEach(function (iconElemStyle) {
-            iconElemStyle.color = '#fff'
-          })
-        }
-        A = alpha
-        // TODO 暂时仅处理背景色
-        if (titleElem) {
-          titleElem.style.opacity = (alpha as unknown) as string
-        }
-        const bg = rgb.value
-        transparentElemStyle.backgroundColor = `rgba(${bg.r},${bg.g},${bg.b},${alpha})`
-        borderRadiusElemsStyles.forEach(function (
-          borderRadiusElemStyle,
-          index
-        ) {
-          const oldColor = oldColors[index]
-          const rgba = oldColor.match(/[\d+\.]+/g)!
-          rgba[3] = (((1 - alpha) *
-            ((rgba.length === 4 ? rgba[3] : 1) as number)) as unknown) as string
-          borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`
-        })
-      }
-    )
+  })
+  useOn(id + '.onPageScroll', ({ scrollTop }: { scrollTop: number }) => {
+    const alpha = Math.min(scrollTop / offset, 1)
+    if (alpha === 1 && A === 1) {
+      return
+    }
+    if (alpha > 0.5 && A <= 0.5) {
+      iconElemsStyles.forEach(function (iconElemStyle) {
+        iconElemStyle.color = titleColor!
+      })
+    } else if (alpha <= 0.5 && A > 0.5) {
+      iconElemsStyles.forEach(function (iconElemStyle) {
+        iconElemStyle.color = '#fff'
+      })
+    }
+    A = alpha
+    // TODO 暂时仅处理背景色
+    if (titleElem) {
+      titleElem.style.opacity = (alpha as unknown) as string
+    }
+    const bg = rgb.value
+    transparentElemStyle.backgroundColor = `rgba(${bg.r},${bg.g},${bg.b},${alpha})`
+    borderRadiusElemsStyles.forEach(function (borderRadiusElemStyle, index) {
+      const oldColor = oldColors[index]
+      const rgba = oldColor.match(/[\d+\.]+/g)!
+      rgba[3] = (((1 - alpha) *
+        ((rgba.length === 4 ? rgba[3] : 1) as number)) as unknown) as string
+      borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`
+    })
   })
 }
diff --git a/packages/uni-h5/src/framework/plugin/page.ts b/packages/uni-h5/src/framework/plugin/page.ts
index e0cbc7c6a64ca7a777d620bbb3dc27280abfe8ed..4ce6ac5c9cf1fcb9dee976b27e9182bb073920c4 100644
--- a/packages/uni-h5/src/framework/plugin/page.ts
+++ b/packages/uni-h5/src/framework/plugin/page.ts
@@ -57,7 +57,7 @@ export function removePage(routeKey: string, removeRouteCaches = true) {
   removeRouteCaches && removeRouteCache(routeKey)
 }
 
-let id = (history.state && history.state.__id__) || 1
+let id = /*#__PURE__*/ (() => (history.state && history.state.__id__) || 1)()
 
 export function createPageState(type: NavigateType, __id__?: number) {
   return {