diff --git a/src/hooks/taro/use-custom-event.ts b/src/hooks/taro/use-custom-event.ts
index 79176c01bd..59792b8d66 100644
--- a/src/hooks/taro/use-custom-event.ts
+++ b/src/hooks/taro/use-custom-event.ts
@@ -1,9 +1,10 @@
 import { useEffect, useRef } from 'react'
 import isEqual from 'react-fast-compare'
-import { Events, getCurrentInstance } from '@tarojs/taro'
+import { eventCenter, getCurrentInstance } from '@tarojs/taro'
 import { useForceUpdate } from '@/hooks/use-force-update'
 
-export const customEvents = new Events()
+// export const customEvents = new Events()
+export const customEvents = eventCenter
 
 export function useCustomEventsPath(selector?: string) {
   selector = selector || ''
diff --git a/src/packages/animatingnumbers/countup.scss b/src/packages/animatingnumbers/countup.scss
index a2d53654cc..097e01e000 100644
--- a/src/packages/animatingnumbers/countup.scss
+++ b/src/packages/animatingnumbers/countup.scss
@@ -1,6 +1,11 @@
 .nut-countup {
   &-list {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     height: $countup-height;
     overflow: hidden;
     direction: ltr;
diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx
index f227f259b2..ee184339f9 100644
--- a/src/packages/avatarcropper/avatarcropper.taro.tsx
+++ b/src/packages/avatarcropper/avatarcropper.taro.tsx
@@ -4,9 +4,8 @@ import React, {
   useMemo,
   useCallback,
   FunctionComponent,
-  useLayoutEffect,
 } from 'react'
-import Taro, { createSelectorQuery } from '@tarojs/taro'
+import Taro, { useReady, createSelectorQuery } from '@tarojs/taro'
 import classNames from 'classnames'
 import { Canvas, CommonEventFunction, View } from '@tarojs/components'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
@@ -138,7 +137,7 @@ export const AvatarCropper: FunctionComponent<
     cropperCanvasContext: null,
   })
 
-  useLayoutEffect(() => {
+  useReady(() => {
     if (showAlipayCanvas2D) {
       const { canvasId } = canvasAll
       createSelectorQuery()
@@ -150,7 +149,7 @@ export const AvatarCropper: FunctionComponent<
         })
         .exec()
     }
-  }, [showAlipayCanvas2D, state.displayHeight, state.displayWidth])
+  })
 
   useEffect(() => {
     setCanvasAll({
@@ -694,5 +693,4 @@ export const AvatarCropper: FunctionComponent<
     </>
   )
 }
-
 AvatarCropper.displayName = 'NutAvatarCropper'
diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss
index dc77b3cb9e..5917fae680 100644
--- a/src/packages/badge/badge.scss
+++ b/src/packages/badge/badge.scss
@@ -1,6 +1,11 @@
 .nut-badge {
   position: relative;
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
   vertical-align: middle;
   box-sizing: content-box;
   width: auto;
@@ -38,7 +43,12 @@
   }
 
   &-sup {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     text-align: center;
     min-width: $badge-min-width;
     padding: $badge-padding;
diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
index 1cf28f4734..5f950e9dad 100644
--- a/src/packages/button/button.scss
+++ b/src/packages/button/button.scss
@@ -55,6 +55,9 @@
     transform: translate(-50%, -50%);
     opacity: 0;
     content: ' ';
+    /* #ifdef dynamic*/
+    pointer-events: none;
+    /* #endif */
   }
 
   &::after {
diff --git a/src/packages/cascader/cascader.scss b/src/packages/cascader/cascader.scss
index 880c83bd29..6abf5b4e8f 100644
--- a/src/packages/cascader/cascader.scss
+++ b/src/packages/cascader/cascader.scss
@@ -11,7 +11,9 @@
   }
 
   .nut-tabs-titles-item {
+    /* #ifndef dynamic*/
     flex: initial;
+    /* #endif */
     min-width: auto;
     width: auto;
     padding: $cascader-tabs-item-padding;
diff --git a/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap b/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap
index b2564f2483..905fb73b15 100644
--- a/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap
+++ b/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`should match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="nut-checkbox nut-checkbox-reverse"
+    class="nut-checkbox nut-checkbox-reverse nut-checkbox-active"
   >
     <div
       class="nut-checkbox-icon-wrap"
diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss
index ebcb5b6b6d..c7e3274f99 100644
--- a/src/packages/checkbox/checkbox.scss
+++ b/src/packages/checkbox/checkbox.scss
@@ -65,7 +65,12 @@
 
   &-button {
     position: relative;
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     align-items: center;
     min-height: 32px;
     padding: $checkbox-button-padding;
diff --git a/src/packages/checkbox/checkbox.taro.tsx b/src/packages/checkbox/checkbox.taro.tsx
index 3bc4464f7f..87264076e0 100644
--- a/src/packages/checkbox/checkbox.taro.tsx
+++ b/src/packages/checkbox/checkbox.taro.tsx
@@ -198,6 +198,7 @@ export const Checkbox: FC<
         {
           [`${classPrefix}-reverse`]: labelPosition === 'left',
           'nut-checkbox-list-item': ctx?.list,
+          [`${classPrefix}-active`]: innerChecked,
         },
         className
       )}
diff --git a/src/packages/checkbox/checkbox.tsx b/src/packages/checkbox/checkbox.tsx
index d80018cbcb..e47feb71e4 100644
--- a/src/packages/checkbox/checkbox.tsx
+++ b/src/packages/checkbox/checkbox.tsx
@@ -203,6 +203,7 @@ export const Checkbox: FunctionComponent<
         {
           [`${classPrefix}-reverse`]: labelPosition === 'left',
           'nut-checkbox-list-item': ctx?.list,
+          [`${classPrefix}-active`]: innerChecked,
         },
         className
       )}
diff --git a/src/packages/checkboxgroup/checkboxgroup.scss b/src/packages/checkboxgroup/checkboxgroup.scss
index 8ddaea06fc..1bd1801d57 100644
--- a/src/packages/checkboxgroup/checkboxgroup.scss
+++ b/src/packages/checkboxgroup/checkboxgroup.scss
@@ -30,7 +30,12 @@
     flex-wrap: wrap;
 
     .nut-checkbox {
+      /* #ifndef dynamic*/
       display: inline-flex;
+      /* #endif */
+      /* #ifdef dynamic*/
+      display: flex;
+      /* #endif */
       flex: 1;
       margin-right: 20px;
 
diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts
index ba5efe4c97..1e6be60b49 100644
--- a/src/packages/configprovider/types.ts
+++ b/src/packages/configprovider/types.ts
@@ -56,12 +56,14 @@ export type NutCSSVariables =
   | 'nutuiFontSizeS'
   | 'nutuiFontSizeBase'
   | 'nutuiFontSizeL'
+  | 'nutuiFontSizeIcon'
   | 'nutuiFontSizeXl'
   | 'nutuiFontSizeXxl'
   | 'nutuiFontSize10'
   | 'nutuiFontSize11'
   | 'nutuiFontWeightLight'
   | 'nutuiFontWeight'
+  | 'nutuiFontWeightMedium'
   | 'nutuiFontWeightBold'
   | 'nutuiLineHeightBase'
   | 'nutuiSpacingXxxs'
@@ -459,10 +461,12 @@ export type NutCSSVariables =
   | 'nutuiDialogMinHeight'
   | 'nutuiDialogBorderRadius'
   | 'nutuiDialogBackground'
+  | 'nutuiDialogTitleMarginBottom'
   | 'nutuiDialogContentMargin'
   | 'nutuiDialogContentMaxHeight'
   | 'nutuiDialogContentLineHeight'
   | 'nutuiDialogContentTextAlign'
+  | 'nutuiDialogFooterButtonBorder'
   | 'nutuiDialogFooterButtonMinWidth'
   | 'nutuiDialogFooterCancelMarginRight'
   | 'nutuiDialogFooterCancelBg'
diff --git a/src/packages/dialog/demos/taro/demo6.tsx b/src/packages/dialog/demos/taro/demo6.tsx
index 73b46d2f9e..1029fe2013 100644
--- a/src/packages/dialog/demos/taro/demo6.tsx
+++ b/src/packages/dialog/demos/taro/demo6.tsx
@@ -40,6 +40,10 @@ const Demo6 = () => {
         cancelText="决策2"
         onConfirm={() => setVisible2(false)}
         onCancel={() => setVisible2(false)}
+        onClose={() => {
+          setVisible2(false)
+          console.log('关闭底部icon 3')
+        }}
         closeIcon
       >
         支持函数调用和组件调用两种方式。
diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss
index d9c865f04a..14abe5e82e 100644
--- a/src/packages/dialog/dialog.scss
+++ b/src/packages/dialog/dialog.scss
@@ -19,9 +19,11 @@
     position: fixed;
     max-height: 100%;
     background-color: $dialog-background;
+    /* #ifndef dynamic*/
     transition:
       transform 0.2s,
       -webkit-transform 0.2s;
+    /* #endif */
     -webkit-overflow-scrolling: touch;
     top: 50%;
     left: 50%;
@@ -83,6 +85,7 @@
     font-size: $dialog-header-font-size;
     font-weight: $dialog-header-font-weight;
     color: $color-title;
+    margin-bottom: $dialog-title-margin-bottom;
     @include oneline-ellipsis();
   }
 
@@ -125,12 +128,15 @@
 
     .nut-button {
       min-width: $dialog-footer-button-min-width;
+      border-radius: $dialog-footer-button-border;
+      padding: var(--nutui-button-large-padding, 0 12px);
     }
 
     &-cancel.nut-dialog-footer-cancel {
       margin-right: $dialog-footer-cancel-margin-right;
       background: $dialog-footer-cancel-bg;
       color: $button-default-color;
+      border-color: var(--nutui-button-default-border-color, transparent);
       .nut-button-children {
         color: $button-default-color;
       }
@@ -138,9 +144,9 @@
 
     &-ok {
       max-width: $dialog-footer-ok-max-width;
-      font-weight: $font-weight-bold;
+      font-weight: $font-weight-medium;
       .nut-button-children {
-        font-weight: $font-weight-bold;
+        font-weight: $font-weight-medium;
       }
     }
 
diff --git a/src/packages/divider/divider.scss b/src/packages/divider/divider.scss
index de3f74a007..48b5a07446 100644
--- a/src/packages/divider/divider.scss
+++ b/src/packages/divider/divider.scss
@@ -45,7 +45,12 @@
   }
 
   &-vertical {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     width: 0px;
     height: $divider-vertical-height;
     border-left: 1px solid $divider-border-color;
diff --git a/src/packages/drag/drag.scss b/src/packages/drag/drag.scss
index 681be86960..eaf03eb04d 100644
--- a/src/packages/drag/drag.scss
+++ b/src/packages/drag/drag.scss
@@ -7,7 +7,12 @@
   user-select: none;
   font-size: 0;
   &-inner {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     width: fit-content;
     height: fit-content;
     touch-action: none;
diff --git a/src/packages/elevator/elevator.scss b/src/packages/elevator/elevator.scss
index e67666991f..34cdd1c86b 100644
--- a/src/packages/elevator/elevator.scss
+++ b/src/packages/elevator/elevator.scss
@@ -16,7 +16,9 @@
       min-height: 100%;
       width: 100%;
       background-color: $elevator-list-bg-color;
+      /* #ifndef dynamic*/
       overflow: auto;
+      /* #endif */
     }
 
     &-item {
@@ -96,7 +98,12 @@
       display: flex;
       flex-direction: column;
       &-item {
+        /* #ifndef dynamic*/
         display: inline-flex;
+        /* #endif */
+        /* #ifdef dynamic*/
+        display: flex;
+        /* #endif */
         align-items: center;
         justify-content: center;
         height: 16px;
diff --git a/src/packages/input/input.scss b/src/packages/input/input.scss
index 84069abf72..34ae231312 100644
--- a/src/packages/input/input.scss
+++ b/src/packages/input/input.scss
@@ -33,7 +33,6 @@
   flex: 1;
   color: $color-title;
   font-size: $input-font-size;
-  line-height: $input-lineheight;
   padding: 0;
   border: 0;
   outline: 0 none;
diff --git a/src/packages/input/input.taro.tsx b/src/packages/input/input.taro.tsx
index d27c75e450..68508757fe 100644
--- a/src/packages/input/input.taro.tsx
+++ b/src/packages/input/input.taro.tsx
@@ -7,13 +7,14 @@ import React, {
 } from 'react'
 import { Input as TaroInput, View } from '@tarojs/components'
 import { MaskClose } from '@nutui/icons-react-taro'
-import Taro, { ENV_TYPE, getEnv } from '@tarojs/taro'
+import Taro, { getEnv } from '@tarojs/taro'
 import { BaseEventOrig } from '@tarojs/components/types/common'
 import { formatNumber } from './utils'
 import { useConfig, useRtl } from '@/packages/configprovider/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/hooks/use-props-value'
 import { InputFormatTrigger, TaroInputProps } from '@/types'
+import { ENV_TYPE } from '@/utils/taro/env-type'
 
 const defaultProps = {
   ...ComponentDefaults,
@@ -195,7 +196,7 @@ export const Input = forwardRef((props: Partial<TaroInputProps>, ref) => {
           placeholder === undefined ? locale.placeholder : placeholder
         }
         placeholderClass={`${classPrefix}-placeholder`}
-        disabled={disabled || readOnly}
+        disabled={disabled}
         value={value}
         focus={autoFocus || focus}
         confirmType={confirmType}
diff --git a/src/packages/inputnumber/inputnumber.scss b/src/packages/inputnumber/inputnumber.scss
index 4596983226..63c25c7a1f 100644
--- a/src/packages/inputnumber/inputnumber.scss
+++ b/src/packages/inputnumber/inputnumber.scss
@@ -1,7 +1,13 @@
 .nut-inputnumber {
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
   width: calc(
-    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} + #{$inputnumber-input-width}
+    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} +
+      #{$inputnumber-input-width}
   );
   flex-direction: row;
   align-items: center;
diff --git a/src/packages/loading/loading.scss b/src/packages/loading/loading.scss
index 9b4c694b4a..c6d9bf444c 100644
--- a/src/packages/loading/loading.scss
+++ b/src/packages/loading/loading.scss
@@ -1,5 +1,10 @@
 .nut-loading {
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
   flex-direction: row;
   align-items: center;
   justify-content: center;
diff --git a/src/packages/lottie/lottiemp.taro.tsx b/src/packages/lottie/lottiemp.taro.tsx
index 82790d79e8..5dd321c581 100644
--- a/src/packages/lottie/lottiemp.taro.tsx
+++ b/src/packages/lottie/lottiemp.taro.tsx
@@ -1,5 +1,5 @@
-import React, { useImperativeHandle, useLayoutEffect, useRef } from 'react'
-import { createSelectorQuery, getEnv, useUnload } from '@tarojs/taro'
+import React, { useImperativeHandle, useRef } from 'react'
+import { createSelectorQuery, getEnv, useReady, useUnload } from '@tarojs/taro'
 import lottie from '@nutui/lottie-miniprogram'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
 import { useUuid } from '@/hooks/use-uuid'
@@ -20,10 +20,15 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
     speed = 1,
     dpr = true,
   } = props
-
+  const setSpeed = () => {
+    if (animation.current) {
+      animation.current.setSpeed(Math.abs(speed))
+      animation.current.setDirection(speed > 0 ? 1 : -1)
+    }
+  }
   useImperativeHandle(ref, () => animation.current || {})
   const pixelRatio = useRef(getWindowInfo().pixelRatio)
-  useLayoutEffect(() => {
+  useReady(() => {
     createSelectorQuery()
       .select(`#${id}`)
       .fields(
@@ -57,14 +62,9 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
                 context,
               },
             })
-            if (onComplete) {
+            onComplete &&
               animation.current.addEventListener('complete', onComplete)
-            }
-
-            if (animation.current) {
-              animation.current.setSpeed(Math.abs(speed))
-              animation.current.setDirection(speed > 0 ? 1 : -1)
-            }
+            setSpeed()
             inited.current = true
           } catch (error) {
             console.error(error)
@@ -72,8 +72,7 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
         }
       )
       .exec()
-  }, [autoPlay, dpr, id, loop, onComplete, source, speed, style])
-
+  })
   useUnload(() => {
     onComplete &&
       animation.current &&
diff --git a/src/packages/menuitem/menuitem.scss b/src/packages/menuitem/menuitem.scss
index fab08acba8..2c9dc22c60 100644
--- a/src/packages/menuitem/menuitem.scss
+++ b/src/packages/menuitem/menuitem.scss
@@ -29,7 +29,12 @@
     }
 
     .nut-icon {
+      /* #ifndef dynamic*/
       display: inline-flex;
+      /* #endif */
+      /* #ifdef dynamic*/
+      display: flex;
+      /* #endif */
       align-items: center;
       margin-right: $menu-item-icon-margin;
       flex-shrink: 0;
diff --git a/src/packages/noticebar/demos/taro/demo10.tsx b/src/packages/noticebar/demos/taro/demo10.tsx
index 6958c3e405..03d7f7f745 100644
--- a/src/packages/noticebar/demos/taro/demo10.tsx
+++ b/src/packages/noticebar/demos/taro/demo10.tsx
@@ -3,10 +3,10 @@ import { Button, NoticeBar, Space } from '@nutui/nutui-react-taro'
 
 const Demo10 = () => {
   const horseLamp3 = [
-    'NoticeBar 公告栏',
-    'Cascader 级联选择',
-    'DatePicker 日期选择器',
-    'CheckBox 复选按钮',
+    'NoticeBar 公告栏-公告栏公告栏公告栏公告栏',
+    'Cascader 级联选择-公告栏公告栏公告栏公告栏',
+    'DatePicker 日期选择器-公告栏公告栏公告栏公告栏公告栏',
+    'CheckBox 复选按钮-公告栏公告栏公告栏公告栏公告栏',
   ]
 
   const [list, setList] = useState(horseLamp3)
@@ -17,6 +17,7 @@ const Demo10 = () => {
         direction="vertical"
         height={50}
         speed={10}
+        scrollable={false}
         duration={1000}
         closeable
         onClose={() => {
@@ -27,7 +28,13 @@ const Demo10 = () => {
           return (
             <div
               className="custom-item"
-              style={{ height: '50px', lineHeight: '50px' }}
+              style={{
+                height: '50px',
+                lineHeight: '50px',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+              }}
               key={index}
               onClick={() => {
                 console.log('custom-inner', item)
diff --git a/src/packages/noticebar/noticebar.scss b/src/packages/noticebar/noticebar.scss
index 7f32924009..4c98dc203b 100644
--- a/src/packages/noticebar/noticebar.scss
+++ b/src/packages/noticebar/noticebar.scss
@@ -36,11 +36,15 @@
       justify-content: center;
 
       .nut-noticebar-box-wrap {
+        /* #ifndef dynamic*/
         flex: initial;
+        /* #endif */
 
         .nut-noticebar-box-wrap-content {
           position: relative;
+          /* #ifndef dynamic*/
           display: initial;
+          /* #endif */
         }
       }
     }
diff --git a/src/packages/noticebar/noticebar.taro.tsx b/src/packages/noticebar/noticebar.taro.tsx
index 1a36175485..93f479a1ae 100644
--- a/src/packages/noticebar/noticebar.taro.tsx
+++ b/src/packages/noticebar/noticebar.taro.tsx
@@ -6,9 +6,11 @@ import React, {
   useState,
   useCallback,
 } from 'react'
+import { nextTick } from '@tarojs/taro'
 import { ITouchEvent, View } from '@tarojs/components'
 import { Close, Notice } from '@nutui/icons-react-taro'
 import classNames from 'classnames'
+import { useUuid } from '@/hooks/use-uuid'
 import { getRectInMultiPlatform } from '@/utils/taro/get-rect'
 import { ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '@/packages/configprovider/index.taro'
@@ -67,7 +69,12 @@ export const NoticeBar: FunctionComponent<
   const classPrefix = 'nut-noticebar'
   const wrapRef = useRef<HTMLDivElement>(null)
   const contentRef = useRef<HTMLDivElement>(null)
-  const [showNoticeBar, SetShowNoticeBar] = useState(true)
+
+  const uid = useUuid()
+  const wrapRefId = `wrap-ref-${uid}`
+  const contentRefId = `content-ref-${uid}`
+
+  const [showNoticeBar, setShowNoticeBar] = useState(true)
   const scrollList: any = useRef([])
   const [wrapWidth, SetWrapWidth] = useState(0)
   const [firstRound, SetFirstRound] = useState(true)
@@ -127,7 +134,7 @@ export const NoticeBar: FunctionComponent<
         startRollEasy()
       }
     } else {
-      initScrollWrap(content)
+      initScrollWrap()
     }
     return () => {
       // 销毁事件
@@ -136,7 +143,7 @@ export const NoticeBar: FunctionComponent<
   }, [childs])
 
   useEffect(() => {
-    initScrollWrap(content)
+    initScrollWrap()
   }, [content])
 
   useEffect(() => {
@@ -145,16 +152,20 @@ export const NoticeBar: FunctionComponent<
     }
   }, [list])
 
-  const initScrollWrap = (value: string) => {
+  const initScrollWrap = () => {
     if (showNoticeBar === false) {
       return
     }
-    setTimeout(async () => {
+    nextTick(async () => {
       if (!wrapRef.current || !contentRef.current) {
         return
       }
-      const warpRes = await getRectInMultiPlatform(wrapRef.current)
-      const contentRes = await getRectInMultiPlatform(contentRef.current)
+      const warpRes = await getRectInMultiPlatform(wrapRef.current, wrapRefId)
+      const contentRes = await getRectInMultiPlatform(
+        contentRef.current,
+        contentRefId
+      )
+      if (!warpRes || !contentRes) return
       const wrapW = warpRes.width
       const offsetW = contentRes.width
       const canScroll =
@@ -168,20 +179,13 @@ export const NoticeBar: FunctionComponent<
       } else {
         SetAnimationClass('')
       }
-    }, 0)
+    })
   }
   const handleClick = (event: ITouchEvent) => {
     click && click(event)
     onClick && onClick(event)
   }
 
-  const onClickIcon = (event: ITouchEvent) => {
-    event.stopPropagation()
-    SetShowNoticeBar(!closeable)
-    close && close(event)
-    onClose && onClose(event)
-  }
-
   const onAnimationEnd = () => {
     SetFirstRound(false)
     setTimeout(() => {
@@ -212,13 +216,15 @@ export const NoticeBar: FunctionComponent<
     }, time)
   }
 
-  // 点击滚动单元
-  const handleClickIcon = (event: ITouchEvent) => {
-    event.stopPropagation()
-    SetShowNoticeBar(!closeable)
-    close && close(event)
-    onClose && onClose(event)
-  }
+  const handleClickIcon = useCallback(
+    (event: ITouchEvent) => {
+      event.stopPropagation()
+      setShowNoticeBar(!closeable)
+      close && close(event)
+      onClose && onClose(event)
+    },
+    [close, onClose, closeable]
+  )
 
   const isEllipsis = () => {
     if (isCanScroll == null && align === 'left') {
@@ -383,10 +389,10 @@ export const NoticeBar: FunctionComponent<
 
   // 无缝滚动第一个元素位移控制
   const itemStyle = (index: any) => {
-    const style: any = {}
+    const style: any = { width: '100%' }
     if (height) {
       style.height = `${height}px`
-      style.lineHeight = `${height}px`
+      // style.lineHeight = `${height}px`
     }
     const offset = childOffset[index]
     if (offset) {
@@ -455,16 +461,52 @@ export const NoticeBar: FunctionComponent<
     setIsContainerReady(true)
   }, [])
 
+  const renderLeftIcon = useCallback(() => {
+    return (
+      <>
+        {leftIcon ? (
+          <View className="nut-noticebar-box-left-icon">{leftIcon}</View>
+        ) : null}
+      </>
+    )
+  }, [leftIcon])
+
+  const renderRight = useCallback(
+    () => (
+      <>
+        {right ? (
+          <View className="nut-noticebar-box-right">{right}</View>
+        ) : null}
+      </>
+    ),
+    [right]
+  )
+
+  const renderRightIcon = useCallback(
+    () => (
+      <>
+        {rightIcon || closeable ? (
+          <View
+            className="nut-noticebar-box-right-icon"
+            onClick={handleClickIcon}
+          >
+            {rightIcon || <Close size={12} />}
+          </View>
+        ) : null}
+      </>
+    ),
+    [rightIcon, closeable, handleClickIcon]
+  )
+
   return (
     <View className={cls} style={style}>
       {showNoticeBar && direction === 'horizontal' ? (
         <View className={noticebarClass} style={barStyle} onClick={handleClick}>
-          {leftIcon ? (
-            <View className="nut-noticebar-box-left-icon">{leftIcon}</View>
-          ) : null}
-          <View ref={wrapRef} className="nut-noticebar-box-wrap">
+          {renderLeftIcon()}
+          <View ref={wrapRef} className="nut-noticebar-box-wrap" id={wrapRefId}>
             <View
               ref={contentRef}
+              id={contentRefId}
               className={`nut-noticebar-box-wrap-content ${animationClass} ${
                 isEllipsis() ? 'nut-ellipsis' : ''
               }`}
@@ -475,17 +517,8 @@ export const NoticeBar: FunctionComponent<
               {content}
             </View>
           </View>
-          {right ? (
-            <View className="nut-noticebar-box-right">{right}</View>
-          ) : null}
-          {closeable || rightIcon ? (
-            <View
-              className="nut-noticebar-box-right-icon"
-              onClick={onClickIcon}
-            >
-              {rightIcon || <Close size={12} />}
-            </View>
-          ) : null}
+          {renderRight()}
+          {renderRightIcon()}
         </View>
       ) : null}
       {showNoticeBar && hasVerticalContent && isVertical ? (
@@ -495,9 +528,7 @@ export const NoticeBar: FunctionComponent<
           ref={containerRefCallback}
           onClick={handleClick}
         >
-          {leftIcon ? (
-            <View className="nut-noticebar-box-left-icon">{leftIcon}</View>
-          ) : null}
+          {renderLeftIcon()}
           {children ? (
             <View className="nut-noticebar-box-wrap" ref={innerRef}>
               {scrollList.current.map((item: string, index: number) => {
@@ -521,7 +552,6 @@ export const NoticeBar: FunctionComponent<
             >
               {scrollList.current.map((item: string, index: number) => {
                 return (
-                  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
                   <View
                     className="nut-noticebar-box-horseLamp-list-item"
                     style={{ height }}
@@ -536,14 +566,8 @@ export const NoticeBar: FunctionComponent<
               })}
             </View>
           )}
-          <View
-            className="nut-noticebar-box-right-icon"
-            onClick={(e) => {
-              handleClickIcon(e)
-            }}
-          >
-            {rightIcon || (closeable ? <Close size={12} /> : null)}
-          </View>
+          {renderRight()}
+          {renderRightIcon()}
         </View>
       ) : null}
     </View>
diff --git a/src/packages/notify/notify.scss b/src/packages/notify/notify.scss
index 39be49ac6f..eaa9698c8b 100644
--- a/src/packages/notify/notify.scss
+++ b/src/packages/notify/notify.scss
@@ -75,7 +75,12 @@
 
   &-left-icon,
   &-right-icon {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
   }
 
   &-left-icon {
diff --git a/src/packages/popup/doc.en-US.md b/src/packages/popup/doc.en-US.md
index ef9afa14d2..6fe5660e34 100644
--- a/src/packages/popup/doc.en-US.md
+++ b/src/packages/popup/doc.en-US.md
@@ -91,6 +91,7 @@ import { Popup } from '@nutui/nutui-react'
 | minHeight | Minimum height of the popup | `string` | `26%` |
 | left | The left of title | `ReactNode` | `-` |
 | title | The center of title | `ReactNode` | `-` |
+| top | The top of popup | `ReactNode` | `-` |
 | description | The subtitle/description | `ReactNode` | `-` |
 | destroyOnClose | Whether to close after the component is destroyed | `boolean` | `false` |
 | round | Whether to show rounded corners | `boolean` | `false` |
diff --git a/src/packages/popup/doc.md b/src/packages/popup/doc.md
index df903651b4..db4f0a5aa4 100644
--- a/src/packages/popup/doc.md
+++ b/src/packages/popup/doc.md
@@ -91,6 +91,7 @@ import { Popup } from '@nutui/nutui-react'
 | minHeight | 设置最小高度 | `string` | `26%` |
 | left | 标题左侧部分 | `ReactNode` | `-` |
 | title | 标题中间部分 | `ReactNode` | `-` |
+| top | 顶部占位 | `ReactNode` | `-` |
 | description | 子标题/描述部分 | `ReactNode` | `-` |
 | destroyOnClose | 组件不可见时，卸载内容 | `boolean` | `false` |
 | round | 是否显示圆角 | `boolean` | `false` |
diff --git a/src/packages/popup/doc.taro.md b/src/packages/popup/doc.taro.md
index 341c881a3e..d003789411 100644
--- a/src/packages/popup/doc.taro.md
+++ b/src/packages/popup/doc.taro.md
@@ -101,6 +101,7 @@ import { Popup } from '@nutui/nutui-react-taro'
 | minHeight | 设置最小高度 | `string` | `26%` |
 | left | 标题左侧部分 | `ReactNode` | `-` |
 | title | 标题中间部分 | `ReactNode` | `-` |
+| top | 頂部佔位 | `ReactNode` | `-` |
 | description | 子标题/描述部分 | `ReactNode` | `-` |
 | destroyOnClose | 组件不可见时，卸载内容 | `boolean` | `false` |
 | round | 是否显示圆角 | `boolean` | `false` |
diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss
index 43c2d714f3..14d1a492e8 100644
--- a/src/packages/popup/popup.scss
+++ b/src/packages/popup/popup.scss
@@ -98,6 +98,10 @@
     &.nut-popup-round {
       border-radius: $popup-border-radius $popup-border-radius 0 0;
     }
+
+    &-top {
+      position: absolute;
+    }
   }
 
   &-right {
diff --git a/src/packages/popup/popup.tsx b/src/packages/popup/popup.tsx
index 6b467c9910..6479ef117e 100644
--- a/src/packages/popup/popup.tsx
+++ b/src/packages/popup/popup.tsx
@@ -66,6 +66,7 @@ export const Popup: FunctionComponent<
     closeIcon,
     left,
     title,
+    top,
     description,
     style,
     transition,
@@ -88,6 +89,7 @@ export const Popup: FunctionComponent<
     onTouchEnd,
   } = { ...defaultProps, ...props }
   const nodeRef = React.useRef<HTMLDivElement | null>(null)
+  const topNodeRef = React.useRef<HTMLDivElement | null>(null)
   let innerIndex = zIndex || _zIndex
   const [index, setIndex] = useState(innerIndex)
   const [innerVisible, setInnerVisible] = useState(visible)
@@ -142,6 +144,12 @@ export const Popup: FunctionComponent<
     onOpen && onOpen()
   }
 
+  useEffect(() => {
+    if (topNodeRef.current && nodeRef.current) {
+      topNodeRef.current.style.bottom = `${nodeRef.current?.clientHeight}px`
+    }
+  }, [innerVisible])
+
   const close = () => {
     if (innerVisible) {
       setInnerVisible(false)
@@ -181,6 +189,15 @@ export const Popup: FunctionComponent<
     )
   }
 
+  const renderTop = () => {
+    if (!top || position !== 'bottom') return null
+    return (
+      <div className={`${classPrefix}-bottom-top`} ref={topNodeRef}>
+        {top}
+      </div>
+    )
+  }
+
   const renderTitle = () => {
     if (left || title || description) {
       return (
@@ -290,6 +307,7 @@ export const Popup: FunctionComponent<
           onTouchEnd={handleTouchEnd}
           onTouchCancel={handleTouchEnd}
         >
+          {renderTop()}
           {renderTitle()}
           {showChildren && children}
         </div>
diff --git a/src/packages/radio/radio.scss b/src/packages/radio/radio.scss
index c14481526c..41f853c141 100644
--- a/src/packages/radio/radio.scss
+++ b/src/packages/radio/radio.scss
@@ -49,7 +49,12 @@
   }
 
   &-button {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     align-items: center;
     min-height: 30px;
     padding: $radio-button-padding;
diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss
index 8ad71f5eaa..39e97b0082 100644
--- a/src/packages/rate/rate.scss
+++ b/src/packages/rate/rate.scss
@@ -97,7 +97,12 @@
   }
 
   &-score {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     align-items: center;
     color: $rate-font-color;
     font-family: 'JDZH-Regular';
diff --git a/src/packages/rate/rate.taro.tsx b/src/packages/rate/rate.taro.tsx
index 000c68f296..e2f30008f5 100644
--- a/src/packages/rate/rate.taro.tsx
+++ b/src/packages/rate/rate.taro.tsx
@@ -1,14 +1,13 @@
 import React, {
   FunctionComponent,
   ReactElement,
-  useCallback,
   useEffect,
-  useLayoutEffect,
   useRef,
   useState,
 } from 'react'
 import classNames from 'classnames'
 import { StarFill } from '@nutui/icons-react-taro'
+import { useReady } from '@tarojs/taro'
 import { ITouchEvent, Text, View } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/hooks/use-props-value'
@@ -132,7 +131,7 @@ export const Rate: FunctionComponent<Partial<TaroRateProps>> = (props) => {
     }
   }
 
-  const updateRects = useCallback(() => {
+  const updateRects = () => {
     for (let index = 0; index < refs.length; index++) {
       const item = refs[index]
       if (item) {
@@ -141,11 +140,11 @@ export const Rate: FunctionComponent<Partial<TaroRateProps>> = (props) => {
         })
       }
     }
-  }, [refs])
+  }
 
-  useLayoutEffect(() => {
+  useReady(() => {
     updateRects()
-  }, [updateRects])
+  })
 
   const handleTouchStart = (e: any) => {
     if (!touchable || readOnly || disabled) {
diff --git a/src/packages/resultpage/resultpage.scss b/src/packages/resultpage/resultpage.scss
index be4eed121c..5dc7936423 100644
--- a/src/packages/resultpage/resultpage.scss
+++ b/src/packages/resultpage/resultpage.scss
@@ -6,7 +6,12 @@
   align-items: center;
   margin: 0 auto;
   &-icon {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     margin-bottom: $resultpage-icon-margin-bottom;
     .nut-icon {
       height: $resultpage-icon-size;
diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss
index d12468c67e..ef227a11dc 100644
--- a/src/packages/searchbar/searchbar.scss
+++ b/src/packages/searchbar/searchbar.scss
@@ -121,7 +121,12 @@
 
   &-left,
   &-right {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     align-items: center;
 
     &.nut-icon {
diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss
index 9163ff2dff..6db5a123fc 100644
--- a/src/packages/segmented/segmented.scss
+++ b/src/packages/segmented/segmented.scss
@@ -1,5 +1,10 @@
 .nut-segmented {
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
   height: $segmented-height;
   min-width: 24px;
   padding: $segmented-padding;
diff --git a/src/packages/sidebaritem/sidebaritem.scss b/src/packages/sidebaritem/sidebaritem.scss
index 3dc1602aef..095b99c5eb 100644
--- a/src/packages/sidebaritem/sidebaritem.scss
+++ b/src/packages/sidebaritem/sidebaritem.scss
@@ -7,7 +7,9 @@
   color: $color-title;
   padding: $sidebar-item-padding;
   box-sizing: border-box;
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
 
   &.inactive {
     overflow: visible;
diff --git a/src/packages/signature/demo.scss b/src/packages/signature/demo.scss
index 1639034617..f2201c88b6 100644
--- a/src/packages/signature/demo.scss
+++ b/src/packages/signature/demo.scss
@@ -13,7 +13,12 @@
 
   .demo-btn {
     margin-top: 0;
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     align-items: center;
   }
 }
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index a7b0064fd9..42958656b1 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -4,7 +4,12 @@
 
   &-content {
     position: relative;
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     width: $skeleton-line-width;
     background: $skeleton-background;
     border-radius: $skeleton-line-border-radius;
diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss
index 17d281e6d8..fefab31450 100644
--- a/src/packages/steps/steps.scss
+++ b/src/packages/steps/steps.scss
@@ -114,7 +114,12 @@
           width: 100%;
 
           &-inner {
+            /* #ifndef dynamic*/
             display: inline-flex;
+            /* #endif */
+            /* #ifdef dynamic*/
+            display: flex;
+            /* #endif */
             height: $steps-base-line-height;
             width: 100%;
             background: $steps-base-line-background;
@@ -232,7 +237,9 @@
         align-items: center;
         height: $steps-vertical-line-height;
         font-size: $steps-vertical-title-font-size;
+        /* #ifndef dynamic*/
         overflow: auto;
+        /* #endif */
         font-weight: 500;
         margin-bottom: $steps-vertical-title-margin-bottom;
       }
diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx
index 8d5dc887e7..711dee5e1a 100644
--- a/src/packages/swipe/swipe.taro.tsx
+++ b/src/packages/swipe/swipe.taro.tsx
@@ -4,17 +4,17 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useLayoutEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react'
 import classNames from 'classnames'
 import { ITouchEvent, View } from '@tarojs/components'
 import { BaseEventOrig } from '@tarojs/components/types/common'
+import { nextTick, useReady } from '@tarojs/taro'
 import { useTouch } from '@/hooks/use-touch'
 import { getRectInMultiPlatform } from '@/utils/taro/get-rect'
 import { ComponentDefaults } from '@/utils/typings'
-import { harmony } from '@/utils/taro/platform'
 import { useRefState } from '@/hooks/use-ref-state'
 import { useUuid } from '@/hooks/use-uuid'
 import { PositionX, SwipeRef, TaroSwipeProps } from '@/types'
@@ -46,6 +46,26 @@ export const Swipe = forwardRef<
   const leftId = `swipe-left-${uid}`
   const rightId = `swipe-right-${uid}`
 
+  const getWidth = async () => {
+    if (leftWrapper.current) {
+      const leftRect = await getRectInMultiPlatform(leftWrapper.current, leftId)
+      leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
+    }
+    if (rightWrapper.current) {
+      const rightRect = await getRectInMultiPlatform(
+        rightWrapper.current,
+        rightId
+      )
+      rightRect &&
+        setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
+    }
+  }
+
+  // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
+  useReady(() => {
+    nextTick(() => getWidth())
+  })
+
   const { children, className, style } = { ...defaultProps, ...props }
 
   const root: any = useRef<HTMLDivElement>()
@@ -57,71 +77,35 @@ export const Swipe = forwardRef<
     offset: 0,
     dragging: false,
   })
-
   const [actionWidth, updateState] = useRefState({
     left: 0,
     right: 0,
   })
-  const setActionWidth = useCallback(
-    (fn: any) => {
-      const res = fn()
-      if (res.left !== undefined) {
-        updateState({
-          ...actionWidth.current,
-          left: res.left,
-        })
-      }
-      if (res.right !== undefined) {
-        updateState({
-          ...actionWidth.current,
-          right: res.right,
-        })
-      }
-    },
-    [actionWidth, updateState]
-  )
-
-  // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
-  useLayoutEffect(() => {
-    const getWidth = async () => {
-      if (leftWrapper.current) {
-        const leftRect = await getRectInMultiPlatform(
-          leftWrapper.current,
-          leftId
-        )
-        leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
-      }
-      if (rightWrapper.current) {
-        const rightRect = await getRectInMultiPlatform(
-          rightWrapper.current,
-          rightId
-        )
-        rightRect &&
-          setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
-      }
+  const setActionWidth = (fn: any) => {
+    const res = fn()
+    if (res.left !== undefined) {
+      updateState({
+        ...actionWidth.current,
+        left: res.left,
+      })
     }
-
-    getWidth()
-  }, [leftId, rightId, setActionWidth])
-
-  const wrapperStyle = {
-    transform: `translate(${state.offset}${!harmony() ? 'px' : ''}, 0)`,
-    transitionDuration: state.dragging ? '0s' : '.6s',
-  }
-  const onTouchStart = async (event: BaseEventOrig<HTMLDivElement>) => {
-    if (leftWrapper.current) {
-      const leftRect = await getRectInMultiPlatform(leftWrapper.current, leftId)
-      leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
+    if (res.right !== undefined) {
+      updateState({
+        ...actionWidth.current,
+        right: res.right,
+      })
     }
-    if (rightWrapper.current) {
-      const rightRect = await getRectInMultiPlatform(
-        rightWrapper.current,
-        rightId
-      )
-      rightRect &&
-        setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
+  }
+  const wrapperStyle = useMemo(() => {
+    return {
+      transform: `translate(${state.offset}px, 0)`,
+      transitionDuration: state.dragging ? '0.01s' : '.6s',
     }
+  }, [state.offset, state.dragging])
+
+  const onTouchStart = async (event: BaseEventOrig<HTMLDivElement>) => {
     if (!props.disabled) {
+      getWidth()
       startOffset.current = state.offset
       touch.start(event)
       props.onTouchStart?.(event)
@@ -129,32 +113,31 @@ export const Swipe = forwardRef<
   }
 
   const onTouchMove = (event: BaseEventOrig<HTMLDivElement>) => {
-    if (props.disabled) {
-      return
-    }
-
+    if (props.disabled) return
     touch.move(event)
     props.onTouchMove?.(event)
     if (touch.isHorizontal()) {
       lockClick.current = true
-      const newState = { ...state, dragging: true }
       const isEdge = !opened || touch.deltaX.current * startOffset.current < 0
       if (isEdge) {
         preventDefault(event, true)
       }
-
-      newState.offset = rangeCalculation(
+      const offset = rangeCalculation(
         touch.deltaX.current + startOffset.current,
         -actionWidth.current.right || 0,
         actionWidth.current.left || 0
       )
-      setState(newState)
+      setState((prevState) => ({
+        ...prevState,
+        dragging: true,
+        offset: Number(offset) || 0,
+      }))
     }
   }
 
   const onTouchEnd = (event: BaseEventOrig<HTMLDivElement>) => {
     if (state.dragging) {
-      setState((v) => ({ ...v, dragging: false }))
+      setState((prevState) => ({ ...prevState, dragging: false }))
       toggle(state.offset > 0 ? 'left' : 'right')
       setTimeout(() => {
         lockClick.current = false
@@ -181,20 +164,30 @@ export const Swipe = forwardRef<
       side === 'left' ? actionWidth.current.left : -actionWidth.current.right
     const name = props.name as number | string
     props.onOpen?.({ name, position: side })
-    setState((v) => ({ ...v, offset: Number(offset) || 0 }))
-  }
 
-  const close = (position?: PositionX) => {
-    if (opened.current) {
-      opened.current = false
-      props.onClose?.({
-        name: props.name as number | string,
-        position: position || 'left',
-      })
-    }
-    setState((v) => ({ ...v, offset: 0 }))
+    setState((prevState) => ({
+      ...prevState,
+      offset: Number(offset) || 0,
+    }))
   }
 
+  const close = useCallback(
+    (position?: PositionX) => {
+      if (opened.current) {
+        opened.current = false
+        props.onClose?.({
+          name: props.name as number | string,
+          position: position || 'left',
+        })
+      }
+      setState((prevState) => ({
+        ...prevState,
+        offset: 0,
+      }))
+    },
+    [props]
+  )
+
   const rangeCalculation = (
     num: number | string,
     min: number | string,
@@ -238,8 +231,7 @@ export const Swipe = forwardRef<
   }))
 
   useEffect(() => {
-    if (harmony()) return
-
+    // 并没有生效
     const handler: any = (event: { target: Node | null }) => {
       const targets = [root]
       if (
@@ -254,11 +246,10 @@ export const Swipe = forwardRef<
     }
 
     document.addEventListener('touchstart', handler)
-
     return () => {
       document.removeEventListener('touchstart', handler)
     }
-  }, [])
+  }, [close])
 
   return (
     <View
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 687c8a0eb1..f4beaca740 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -1,7 +1,12 @@
 .nut-switch {
   cursor: pointer;
   position: relative;
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
   flex-direction: row;
   align-items: center;
   min-width: $switch-width;
@@ -58,7 +63,12 @@
   }
 
   &-label {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     align-items: center;
     height: 100%;
     white-space: nowrap;
diff --git a/src/packages/tabpane/tabpane.scss b/src/packages/tabpane/tabpane.scss
index ba3befd7a6..d2aa328119 100644
--- a/src/packages/tabpane/tabpane.scss
+++ b/src/packages/tabpane/tabpane.scss
@@ -6,7 +6,9 @@
   color: $color-title;
   padding: $tabs-tabpane-padding;
   box-sizing: border-box;
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
 
   &.inactive {
     overflow: visible;
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
index f2d51cf453..82ca0a560b 100644
--- a/src/packages/tabs/tabs.scss
+++ b/src/packages/tabs/tabs.scss
@@ -110,7 +110,9 @@
       }
 
       .nut-tabs-titles-item-line {
+        /* #ifndef dynamic*/
         overflow: unset;
+        /* #endif */
         content: ' ';
         width: $tabs-tab-line-width;
         height: $tabs-tab-line-height;
@@ -118,7 +120,9 @@
       }
 
       .nut-tabs-titles-item-smile {
+        /* #ifndef dynamic*/
         overflow: unset;
+        /* #endif */
         width: 40px;
         height: 20px;
 
diff --git a/src/packages/tag/tag.scss b/src/packages/tag/tag.scss
index b5121f2e7d..124e0839b5 100644
--- a/src/packages/tag/tag.scss
+++ b/src/packages/tag/tag.scss
@@ -62,7 +62,12 @@
   }
 
   &-custom-icon {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     align-items: center;
     justify-content: center;
     font-size: $tag-font-size;
diff --git a/src/packages/timeselect/timeselect.scss b/src/packages/timeselect/timeselect.scss
index 5a0b79047b..c9b761f350 100644
--- a/src/packages/timeselect/timeselect.scss
+++ b/src/packages/timeselect/timeselect.scss
@@ -16,7 +16,9 @@
     width: $timeselect-date-width;
     min-width: $timeselect-date-width;
     height: 100%;
+    /* #ifndef dynamic*/
     overflow: auto;
+    /* #endif */
     background: $color-background-sunken;
   }
 }
diff --git a/src/packages/toast/toast.scss b/src/packages/toast/toast.scss
index cb29cfc295..05e9364d10 100644
--- a/src/packages/toast/toast.scss
+++ b/src/packages/toast/toast.scss
@@ -96,6 +96,10 @@
     color: #ffffff;
     text-align: $toast-inner-text-align;
     line-height: 20px;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
+    height: auto;
   }
 
   &-title {
@@ -104,6 +108,9 @@
     font-weight: 600;
     text-align: $toast-inner-text-align;
     line-height: 22px;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
   }
 
   .nut-icon {
diff --git a/src/packages/toast/toast.taro.tsx b/src/packages/toast/toast.taro.tsx
index 263333f75e..0dbcd945d4 100644
--- a/src/packages/toast/toast.taro.tsx
+++ b/src/packages/toast/toast.taro.tsx
@@ -13,7 +13,7 @@ import {
 } from '@/hooks/taro/use-custom-event'
 import { usePropsValue } from '@/hooks/use-props-value'
 import { useRtl } from '@/packages/configprovider/index.taro'
-import { harmony } from '@/utils/taro/platform'
+import { harmony, td } from '@/utils/taro/platform'
 import { mergeProps } from '@/utils/merge-props'
 import { TaroToastProps } from '@/types'
 
@@ -181,9 +181,12 @@ export const Toast: FunctionComponent<
             >
               {renderIcon()}
               {title && <Text className={`${classPrefix}-title`}>{title}</Text>}
-              {content && (
-                <Text className={`${classPrefix}-text`}>{content}</Text>
-              )}
+              {content &&
+                (td() ? (
+                  <Text className={`${classPrefix}-text`}>{content}</Text>
+                ) : (
+                  <View className={`${classPrefix}-text`}>{content}</View>
+                ))}
             </View>
           </View>
         </Overlay>
diff --git a/src/packages/virtuallist/virtuallist.scss b/src/packages/virtuallist/virtuallist.scss
index 7b07d8d456..71605201dd 100644
--- a/src/packages/virtuallist/virtuallist.scss
+++ b/src/packages/virtuallist/virtuallist.scss
@@ -35,7 +35,9 @@
 }
 
 .nut-virtualList-box {
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
 }
 
 .nut-virtuallist {
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
index 0ec52c5709..f4707ab365 100644
--- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
+++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
@@ -98,6 +98,7 @@ If your project uses these components, please read the documentation carefully a
 
 - Added the resizable property for scrolling up and down when the bottom popup is active.
 - Added the minHeight property for setting the minimum height, which can be used with resizable.
+- Added a new attribute top to display user-defined content above the title.
 - Added the onTouchStart, onTouchMove, and onTouchEnd methods.
 
 ### Layout
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
index 65d66178ad..4e44be83ad 100644
--- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
+++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
@@ -98,6 +98,7 @@ plugins: [
 
 - 新增属性 resizable，用于底部弹出时，可上下滑动
 - 新增属性 minHeight，用于设置最小高度，可搭配 resizable 使用
+- 新增属性 top，用于在title上侧展示用户自定义内容
 - 新增 onTouchStart、onTouchMove、onTouchEnd 方法
 
 ### 布局组件
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
index 7ca17fa1cf..02ac582a79 100644
--- a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
+++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
@@ -98,6 +98,7 @@ If your project uses these components, please read the documentation carefully a
 
 - Added the resizable property for scrolling up and down when the bottom popup is active.
 - Added the minHeight property for setting the minimum height, which can be used with resizable.
+- Added a new attribute top to display user-defined content above the title.
 - Added the onTouchStart, onTouchMove, and onTouchEnd methods.
 
 ### Layout
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
index 2fca0c62cf..b1aae2581b 100644
--- a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
+++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
@@ -98,6 +98,7 @@ plugins: [
 
 - 新增属性 resizable，用于底部弹出时，可上下滑动
 - 新增属性 minHeight，用于设置最小高度，可搭配 resizable 使用
+- 新增属性 top，用于在title上侧展示用户自定义内容
 - 新增 onTouchStart、onTouchMove、onTouchEnd 方法
 
 ### 布局组件
diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss
index 22f0283f49..aa5d69a673 100644
--- a/src/styles/theme-default.scss
+++ b/src/styles/theme-default.scss
@@ -259,7 +259,8 @@ page {
   // 标准内容、名称类关键信息
   --nutui-font-size-base: var(--nutui-font-size-14);
   // 汉字：楼层标题、卡片标题 数字：重复型价格，如搜推商卡
-  --nutui-font-size-l: var(--nutui-font-size-16);
+  --nutui-font-size-l: var(--nutui-font-size-15);
+  --nutui-font-size-icon: var(--nutui-font-size-16);
   // 汉字：页面标题、页面级最重要内容 数字：模块级主价格，如购物车、结算、底导
   --nutui-font-size-xl: var(--nutui-font-size-18);
   // 数字：页面级主价格，如商详、收银台
@@ -272,6 +273,8 @@ page {
   --nutui-font-weight-light: 300;
   // 常规内容
   --nutui-font-weight: 400;
+  // 500
+  --nutui-font-weight-medium: 500;
   // 强化内容
   --nutui-font-weight-bold: 600;
 
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index 4c43f781f9..637620aa52 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -103,6 +103,7 @@ $font-text-mini: var(
 
 // 字重
 $font-weight: var(--nutui-font-weight);
+$font-weight-medium: var(--nutui-font-weight-medium, 500) !default;
 $font-weight-bold: var(--nutui-font-weight-bold);
 
 // 行高
@@ -1500,6 +1501,10 @@ $dialog-footer-justify-content: var(
   --nutui-dialog-footer-justify-content,
   space-around
 ) !default;
+$dialog-title-margin-bottom: var(
+  --nutui-dialog-title-margin-bottom,
+  8px
+) !default;
 $dialog-content-margin: var(
   --nutui-dialog-content-margin,
   $spacing-base 0
@@ -1516,6 +1521,10 @@ $dialog-content-text-align: var(
   --nutui-dialog-content-text-align,
   left
 ) !default;
+$dialog-footer-button-border: var(
+  --nutui-dialog-footer-button-border,
+  6px
+) !default;
 $dialog-footer-button-min-width: var(
   --nutui-dialog-footer-button-min-width,
   117px
diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss
index 0811127690..6ac7ed416e 100644
--- a/src/styles/variables-jrkf.scss
+++ b/src/styles/variables-jrkf.scss
@@ -126,6 +126,7 @@ $font-text-mini: var(
 
 // 字重
 $font-weight: var(--nutui-font-weight) !default;
+$font-weight-medium: var(--nutui-font-weight-medium, 500) !default;
 $font-weight-bold: var(--nutui-font-weight-bold) !default;
 
 // 行高
@@ -1613,6 +1614,10 @@ $dialog-footer-justify-content: var(
   --nutui-dialog-footer-justify-content,
   space-around
 ) !default;
+$dialog-title-margin-bottom: var(
+  --nutui-dialog-title-margin-bottom,
+  8px
+) !default;
 $dialog-content-margin: var(
   --nutui-dialog-content-margin,
   $spacing-base 0
@@ -1629,6 +1634,10 @@ $dialog-content-text-align: var(
   --nutui-dialog-content-text-align,
   left
 ) !default;
+$dialog-footer-button-border: var(
+  --nutui-dialog-footer-button-border,
+  6px
+) !default;
 $dialog-footer-button-min-width: var(
   --nutui-dialog-footer-button-min-width,
   117px
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index d7efa1a8c2..20271d7429 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -152,7 +152,8 @@ $font-size-xxs: var(--nutui-font-size-xxs, 10px) !default;
 $font-size-xs: var(--nutui-font-size-xs, 11px) !default;
 $font-size-s: var(--nutui-font-size-s, 12px) !default;
 $font-size-base: var(--nutui-font-size-base, 14px) !default;
-$font-size-l: var(--nutui-font-size-l, 16px) !default;
+$font-size-l: var(--nutui-font-size-l, 15px) !default;
+$font-size-icon: var(--nutui-font-size-icon, 16px) !default;
 $font-size-xl: var(--nutui-font-size-xl, 18px) !default;
 $font-size-xxl: var(--nutui-font-size-xxl, 24px) !default;
 $font-size-xxxl: var(--nutui-font-size-10, 26px) !default;
@@ -161,6 +162,7 @@ $font-size-xxxxl: var(--nutui-font-size-11, 28px) !default;
 // 字重 ok
 $font-weight-light: var(--nutui-font-weight-light, 300) !default;
 $font-weight: var(--nutui-font-weight, 400) !default;
+$font-weight-medium: var(--nutui-font-weight-medium, 500) !default;
 $font-weight-bold: var(--nutui-font-weight-bold, 600) !default;
 
 // 行高
@@ -593,7 +595,7 @@ $input-border-bottom-width: var(
 //   $color-text-disabled
 // ) !default;
 $input-font-size: var(--nutui-input-font-size, $font-size-base) !default;
-$input-lineheight: var(--nutui-input-lineheight, $font-size-l) !default;
+$input-lineheight: var(--nutui-input-lineheight, $font-size-xl) !default;
 $input-border-radius: var(--nutui-input-border-radius, $radius-s) !default;
 // $input-color: var(--nutui-input-color, $color-title) !default;
 $input-background-color: var(
@@ -1079,7 +1081,7 @@ $popup-icon-size: var(--nutui-popup-icon-size, 20px) !default;
 $popup-title-padding: var(--nutui-popup-title-padding, 16px) !default;
 $popup-title-font-size: var(
   --nutui-popup-title-font-size,
-  $font-size-l
+  $font-size-xl
 ) !default;
 $popup-title-font-weight: var(
   --nutui-popup-title-font-weight,
@@ -1392,10 +1394,11 @@ $dialog-background: var(
   --nutui-dialog-background,
   $color-background-overlay
 ) !default;
-$dialog-content-margin: var(
-  --nutui-dialog-content-margin,
-  12px 0 16px 0
+$dialog-title-margin-bottom: var(
+  --nutui-dialog-title-margin-bottom,
+  8px
 ) !default;
+$dialog-content-margin: var(--nutui-dialog-content-margin, 0 0 20px 0) !default;
 $dialog-content-max-height: var(
   --nutui-dialog-content-max-height,
   268px
@@ -1408,6 +1411,10 @@ $dialog-content-text-align: var(
   --nutui-dialog-content-text-align,
   left
 ) !default;
+$dialog-footer-button-border: var(
+  --nutui-dialog-footer-button-border,
+  6px
+) !default;
 $dialog-footer-button-min-width: var(
   --nutui-dialog-footer-button-min-width,
   117px
@@ -1418,7 +1425,7 @@ $dialog-footer-cancel-margin-right: var(
 ) !default;
 $dialog-footer-cancel-bg: var(
   --nutui-dialog-footer-cancel-bg,
-  $button-default-background-color
+  $color-background-sunken
 );
 $dialog-footer-ok-max-width: var(
   --nutui-dialog-footer-ok-max-width,
@@ -1426,7 +1433,7 @@ $dialog-footer-ok-max-width: var(
 ) !default;
 $dialog-header-font-size: var(
   --nutui-dialog-header-font-size,
-  $font-size-l
+  $font-size-xl
 ) !default;
 $dialog-header-font-weight: var(
   --nutui-dialog-header-font-weight,
@@ -1467,7 +1474,7 @@ $checkbox-label-font-size: var(
 ) !default;
 $checkbox-icon-font-size: var(
   --nutui-checkbox-icon-font-size,
-  $font-size-l
+  $font-size-icon
 ) !default;
 $checkbox-button-font-size: var(
   --nutui-checkbox-button-font-size,
@@ -1506,7 +1513,10 @@ $checkbox-list-item-padding: var(
 ) !default;
 
 //radio（✅）
-$radio-icon-font-size: var(--nutui-radio-icon-font-size, $font-size-l) !default;
+$radio-icon-font-size: var(
+  --nutui-radio-icon-font-size,
+  $font-size-icon
+) !default;
 $radio-label-color: var(--nutui-radio-label-color, $color-title) !default;
 $radio-label-disable-color: var(
   --nutui-radio-label-disable-color,
diff --git a/src/types/spec/popup/base.ts b/src/types/spec/popup/base.ts
index 699d4b9f28..38d6d4e3ae 100644
--- a/src/types/spec/popup/base.ts
+++ b/src/types/spec/popup/base.ts
@@ -17,6 +17,7 @@ export interface BasePopup extends BaseProps, BaseOverlay {
   closeIcon: ReactNode
   left?: ReactNode
   title?: ReactNode
+  top?: ReactNode
   description?: ReactNode
   destroyOnClose: boolean
   overlay: boolean
diff --git a/src/utils/taro/env-type.ts b/src/utils/taro/env-type.ts
new file mode 100644
index 0000000000..4b420a93ee
--- /dev/null
+++ b/src/utils/taro/env-type.ts
@@ -0,0 +1,12 @@
+export const ENV_TYPE = {
+  WEAPP: 'WEAPP',
+  SWAN: 'SWAN',
+  ALIPAY: 'ALIPAY',
+  TT: 'TT',
+  QQ: 'QQ',
+  JD: 'JD',
+  WEB: 'WEB',
+  RN: 'RN',
+  HARMONY: 'HARMONY',
+  QUICKAPP: 'QUICKAPP',
+}
diff --git a/src/utils/taro/get-rect-by-id.ts b/src/utils/taro/get-rect-by-id.ts
index 82172c9931..e6a9e93995 100644
--- a/src/utils/taro/get-rect-by-id.ts
+++ b/src/utils/taro/get-rect-by-id.ts
@@ -1,8 +1,9 @@
 import Taro, { createSelectorQuery } from '@tarojs/taro'
+import { ENV_TYPE } from './env-type'
 
 export const getRectById = (id: string) => {
   return new Promise((resolve, reject) => {
-    if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+    if (Taro.getEnv() === ENV_TYPE.WEB) {
       const t = document ? document.querySelector(`#${id}`) : ''
       if (t) {
         resolve(t?.getBoundingClientRect())