diff --git a/src/packages/actionsheet/actionsheet.taro.tsx b/src/packages/actionsheet/actionsheet.taro.tsx
index 5f2cb60c4c..dd4d819027 100644
--- a/src/packages/actionsheet/actionsheet.taro.tsx
+++ b/src/packages/actionsheet/actionsheet.taro.tsx
@@ -1,4 +1,5 @@
 import React, { FunctionComponent, ReactNode } from 'react'
+import { View } from '@tarojs/components'
 import Popup, { PopupProps } from '@/packages/popup/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
 
@@ -70,12 +71,12 @@ export const ActionSheet: FunctionComponent<
         onCancel && onCancel()
       }}
     >
-      <div className={`${className}`} style={style}>
+      <View className={`${className}`} style={style}>
         {options.length ? (
-          <div className={`${classPrefix}-list`}>
+          <View className={`${classPrefix}-list`}>
             {options.map((item, index) => {
               return (
-                <div
+                <View
                   className={`${classPrefix}-item ${
                     item.disabled ? 'disabled' : ''
                   } ${item.danger ? 'danger' : ''}`}
@@ -83,26 +84,26 @@ export const ActionSheet: FunctionComponent<
                   onClick={() => chooseItem(item, index)}
                 >
                   {item[optionKey.name]}
-                  <div className={`${classPrefix}-item-description`}>
+                  <View className={`${classPrefix}-item-description`}>
                     {item[optionKey.description]}
-                  </div>
-                </div>
+                  </View>
+                </View>
               )
             })}
-          </div>
+          </View>
         ) : (
           children
         )}
         {cancelText && (
-          <div
+          <View
             className={`${classPrefix}-cancel`}
             onClick={() => cancelActionSheet()}
           >
             {cancelText}
-          </div>
+          </View>
         )}
-      </div>
-      <div className={`${classPrefix}-safe-area`} />
+      </View>
+      <View className={`${classPrefix}-safe-area`} />
     </Popup>
   )
 }
diff --git a/src/packages/actionsheet/demos/taro/demo1.tsx b/src/packages/actionsheet/demos/taro/demo1.tsx
index 3cc99246ed..ae5c0377b5 100644
--- a/src/packages/actionsheet/demos/taro/demo1.tsx
+++ b/src/packages/actionsheet/demos/taro/demo1.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo1 = () => {
   const [val, setVal] = useState('')
@@ -25,7 +26,7 @@ const Demo1 = () => {
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
         <span>基础用法</span>
-        <div style={{ marginInlineStart: '10px', color: '#999' }}>{val}</div>
+        <View style={{ marginInlineStart: '10px', color: '#999' }}>{val}</View>
       </Cell>
       <ActionSheet
         title="标题"
diff --git a/src/packages/actionsheet/demos/taro/demo2.tsx b/src/packages/actionsheet/demos/taro/demo2.tsx
index c3daeb16a3..abfd264d5c 100644
--- a/src/packages/actionsheet/demos/taro/demo2.tsx
+++ b/src/packages/actionsheet/demos/taro/demo2.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo2 = () => {
   const [isVisible, setIsVisible] = useState(false)
@@ -23,7 +24,7 @@ const Demo2 = () => {
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
         <span>展示取消按钮</span>
-        <div style={{ marginInlineStart: '10px', color: '#999' }}>{val}</div>
+        <View style={{ marginInlineStart: '10px', color: '#999' }}>{val}</View>
       </Cell>
       <ActionSheet
         visible={isVisible}
diff --git a/src/packages/actionsheet/demos/taro/demo3.tsx b/src/packages/actionsheet/demos/taro/demo3.tsx
index 47a2ed33c9..e014a03848 100644
--- a/src/packages/actionsheet/demos/taro/demo3.tsx
+++ b/src/packages/actionsheet/demos/taro/demo3.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo3 = () => {
   const [isVisible, setIsVisible] = useState(false)
@@ -24,7 +25,7 @@ const Demo3 = () => {
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
         <span>展示描述信息</span>
-        <div style={{ marginInlineStart: '10px', color: '#999' }}>{val}</div>
+        <View style={{ marginInlineStart: '10px', color: '#999' }}>{val}</View>
       </Cell>
       <ActionSheet
         visible={isVisible}
diff --git a/src/packages/actionsheet/demos/taro/demo5.tsx b/src/packages/actionsheet/demos/taro/demo5.tsx
index 20e4768300..5089dd155f 100644
--- a/src/packages/actionsheet/demos/taro/demo5.tsx
+++ b/src/packages/actionsheet/demos/taro/demo5.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo5 = () => {
   const [isVisible, setIsVisible] = useState(false)
@@ -16,8 +17,12 @@ const Demo5 = () => {
         }}
         onCancel={() => setIsVisible(false)}
       >
-        <div style={{ textAlign: 'left', padding: '10px 20px' }}>新建表格</div>
-        <div style={{ textAlign: 'left', padding: '10px 20px' }}>新建文档</div>
+        <View style={{ textAlign: 'left', padding: '10px 20px' }}>
+          新建表格
+        </View>
+        <View style={{ textAlign: 'left', padding: '10px 20px' }}>
+          新建文档
+        </View>
       </ActionSheet>
     </>
   )
diff --git a/src/packages/audio/audio.taro.tsx b/src/packages/audio/audio.taro.tsx
index db9bb63dba..62df5dfc7c 100644
--- a/src/packages/audio/audio.taro.tsx
+++ b/src/packages/audio/audio.taro.tsx
@@ -7,6 +7,7 @@ import React, {
 
 import { createInnerAudioContext, InnerAudioContext } from '@tarojs/taro'
 import { Service } from '@nutui/icons-react-taro'
+import { View } from '@tarojs/components'
 import Range from '@/packages/range/index.taro'
 import Button from '@/packages/button/index.taro'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
@@ -169,8 +170,8 @@ export const Audio: FunctionComponent<
   const renderIcon = () => {
     return (
       <>
-        <div className={`${classPrefix}-icon`}>
-          <div
+        <View className={`${classPrefix}-icon`}>
+          <View
             className={`${classPrefix}-icon-box} ${
               playing
                 ? `${classPrefix}-icon-play}`
@@ -179,8 +180,8 @@ export const Audio: FunctionComponent<
             onClick={handleStatusChange}
           >
             <Service className={playing ? 'nut-icon-loading' : ''} />
-          </div>
-        </div>
+          </View>
+        </View>
       </>
     )
   }
@@ -188,9 +189,9 @@ export const Audio: FunctionComponent<
   const renderProgerss = () => {
     return (
       <>
-        <div className={`${classPrefix}-progress`}>
-          <div className="time">{currentDuration}</div>
-          <div className={`${classPrefix}-progress-bar-wrapper`}>
+        <View className={`${classPrefix}-progress`}>
+          <View className="time">{currentDuration}</View>
+          <View className={`${classPrefix}-progress-bar-wrapper`}>
             <Range
               value={percent}
               onChange={(val: any) => setPercent(val)}
@@ -200,12 +201,12 @@ export const Audio: FunctionComponent<
               inactive-color="#cccccc"
               active-color="#FF0F23"
             />
-          </div>
-          <div className="time">
+          </View>
+          <View className="time">
             {formatSeconds(`${totalSeconds}`) || '00:00:00'}
-          </div>
-        </div>
-        <div
+          </View>
+        </View>
+        <View
           className={
             isCanPlay ? 'custom-button-group' : 'custom-button-group-disable'
           }
@@ -231,19 +232,19 @@ export const Audio: FunctionComponent<
           <Button type="primary" size="small" onClick={handleForward}>
             {locale.audio.forward || '快进'}
           </Button>
-        </div>
+        </View>
       </>
     )
   }
 
   const renderNone = () => {
     return (
-      <div
+      <View
         className={`${classPrefix}-none-container`}
         onClick={handleStatusChange}
       >
         {children}
-      </div>
+      </View>
     )
   }
 
@@ -261,9 +262,9 @@ export const Audio: FunctionComponent<
   }
 
   return (
-    <div className={`${classPrefix} ${className}`} style={style} {...rest}>
+    <View className={`${classPrefix} ${className}`} style={style} {...rest}>
       {renderAudio()}
-    </div>
+    </View>
   )
 }
 
diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx
index 2f6b3f0a66..4fb1b17b32 100644
--- a/src/packages/avatarcropper/avatarcropper.taro.tsx
+++ b/src/packages/avatarcropper/avatarcropper.taro.tsx
@@ -7,7 +7,7 @@ import React, {
 } from 'react'
 import Taro, { useReady, createSelectorQuery } from '@tarojs/taro'
 import classNames from 'classnames'
-import { Canvas } from '@tarojs/components'
+import { Canvas, View } from '@tarojs/components'
 import { Button } from '@/packages/button/button.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useTouch } from '@/utils/use-touch'
@@ -662,17 +662,17 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
     const actions = [cancel, reset, rotate, confirm]
     return (
       <>
-        <div className={`${classPrefix}-popup-toolbar-flex`}>
+        <View className={`${classPrefix}-popup-toolbar-flex`}>
           {actions.map((action, index) => (
-            <div
+            <View
               key={index}
               className={`${classPrefix}-popup-toolbar-item`}
               onClick={(_e) => action()}
             >
               {toolbar[index]}
-            </div>
+            </View>
           ))}
-        </div>
+        </View>
       </>
     )
   }
@@ -681,7 +681,7 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
     const { canvasId } = canvasAll
     return (
       <>
-        <div
+        <View
           className={`${classPrefix}-popup`}
           style={{ display: visible ? 'block' : 'none' }}
         >
@@ -698,24 +698,24 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
             onTouchMove={onTouchMove}
             onTouchEnd={onTouchEnd}
           >
-            <div className="highlight" style={highlightStyle} />
+            <View className="highlight" style={highlightStyle} />
           </div>
-          <div className={toolbarPositionCls}>
+          <View className={toolbarPositionCls}>
             <ToolBar />
-          </div>
-        </div>
+          </View>
+        </View>
       </>
     )
   }
 
   return (
     <>
-      <div className={cls} {...rest} style={style}>
+      <View className={cls} {...rest} style={style}>
         {children}
-        <div className="nut-avatar-cropper-edit-text" onClick={chooseImage}>
+        <View className="nut-avatar-cropper-edit-text" onClick={chooseImage}>
           {editText}
-        </div>
-      </div>
+        </View>
+      </View>
       {CropperPopup()}
     </>
   )
diff --git a/src/packages/avatarcropper/demo.taro.tsx b/src/packages/avatarcropper/demo.taro.tsx
index adb8ec3507..0aecc34d1b 100644
--- a/src/packages/avatarcropper/demo.taro.tsx
+++ b/src/packages/avatarcropper/demo.taro.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -27,16 +28,16 @@ const AvatarCropperDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} full`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView
+        className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} full`}
+      >
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-
-        <h2>{translated.toolbar}</h2>
+        <View className="h2">{translated.toolbar}</View>
         <Demo2 />
-
-        <h2>{translated.round}</h2>
+        <View className="h2">{translated.round}</View>
         <Demo3 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/calendar/demo.taro.tsx b/src/packages/calendar/demo.taro.tsx
index 010e26bdef..c2cd3b94ac 100644
--- a/src/packages/calendar/demo.taro.tsx
+++ b/src/packages/calendar/demo.taro.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import './demo.scss'
-
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
@@ -92,37 +92,23 @@ const CalendarDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.ce5c5446}</h2>
-
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.ce5c5446}</View>
         <Demo1 />
-
         <Demo2 />
-
         <Demo3 />
-
         <Demo4 />
-
         <Demo5 />
-
         <Demo6 />
-
-        <h2>{translated.cfbdc781}</h2>
-
+        <View className="h2">{translated.cfbdc781}</View>
         <Demo7 />
-
         <Demo8 />
-
-        <h2>{translated.d04fcbda}</h2>
-
+        <View className="h2">{translated.d04fcbda}</View>
         <Demo9 />
-
         <Demo10 />
-
-        <h2>{translated.e51e4582}</h2>
-
+        <View className="h2">{translated.e51e4582}</View>
         <Demo11 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/calendar/demos/taro/demo6.tsx b/src/packages/calendar/demos/taro/demo6.tsx
index 45ac299d91..93e78b6fff 100644
--- a/src/packages/calendar/demos/taro/demo6.tsx
+++ b/src/packages/calendar/demos/taro/demo6.tsx
@@ -5,6 +5,7 @@ import {
   DatePicker,
   CalendarDay,
 } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const padZero = (num: number | string, targetLength = 2) => {
   let str = `${num}`
@@ -65,15 +66,15 @@ const Demo6 = () => {
       <Cell
         title="日期区间"
         description={
-          <div className="desc-box">
-            <div className="desc" onClick={openSwitch}>
+          <View className="desc-box">
+            <View className="desc" onClick={openSwitch}>
               {date && date.length ? `${date[0]} ${desc1}` : '请选择起始时间'}
-            </div>
-            <div className="desc1">-</div>
-            <div className="desc" onClick={openSwitch}>
+            </View>
+            <View className="desc1">-</View>
+            <View className="desc" onClick={openSwitch}>
               {date && date.length ? `${date[1]} ${desc2}` : '请选择截止时间'}
-            </div>
-          </div>
+            </View>
+          </View>
         }
       />
       <Calendar
@@ -96,25 +97,25 @@ const Demo6 = () => {
         onClose={closeSwitch}
         onConfirm={setChooseValue}
       >
-        <div className="nut-calendar-btns">
-          <div
+        <View className="nut-calendar-btns">
+          <View
             className={`nut-calendar-date ${dpAbled[0] ? '' : 'disabled'}`}
             onClick={(e) => {
               showDatePicker(e, 1)
             }}
           >
             开始时间：{desc1}
-          </div>
+          </View>
           -
-          <div
+          <View
             className={`nut-calendar-date ${dpAbled[1] ? '' : 'disabled'}`}
             onClick={(e) => {
               showDatePicker(e, 2)
             }}
           >
             结束时间：{desc2}
-          </div>
-        </div>
+          </View>
+        </View>
         <DatePicker
           title="时间选择"
           type="time"
diff --git a/src/packages/calendaritem/calendaritem.taro.tsx b/src/packages/calendaritem/calendaritem.taro.tsx
index 9c5f815098..cd92dca639 100644
--- a/src/packages/calendaritem/calendaritem.taro.tsx
+++ b/src/packages/calendaritem/calendaritem.taro.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, ReactNode } from 'react'
 import classNames from 'classnames'
-import { ScrollView } from '@tarojs/components'
+import { ScrollView, View } from '@tarojs/components'
 import Taro, { nextTick } from '@tarojs/taro'
 import { PopupProps } from '@/packages/popup/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
@@ -758,28 +758,28 @@ export const CalendarItem = React.forwardRef<
 
   const renderHeader = () => {
     return (
-      <div className={headerClasses}>
+      <View className={headerClasses}>
         {showTitle && (
-          <div className={`${classPrefix}-title`}>
+          <View className={`${classPrefix}-title`}>
             {title || locale.calendaritem.title}
-          </div>
+          </View>
         )}
         {renderHeaderButtons && (
-          <div className={`${classPrefix}-header-buttons`}>
+          <View className={`${classPrefix}-header-buttons`}>
             {renderHeaderButtons()}
-          </div>
+          </View>
         )}
         {showSubTitle && (
-          <div className={`${classPrefix}-sub-title`}>{yearMonthTitle}</div>
+          <View className={`${classPrefix}-sub-title`}>{yearMonthTitle}</View>
         )}
-        <div className={`${classPrefix}-weeks`} ref={weeksPanel}>
+        <View className={`${classPrefix}-weeks`} ref={weeksPanel}>
           {weeks.map((item: string) => (
-            <div className={`${classPrefix}-week-item`} key={item}>
+            <View className={`${classPrefix}-week-item`} key={item}>
               {item}
-            </div>
+            </View>
           ))}
-        </div>
-      </div>
+        </View>
+      </View>
     )
   }
 
@@ -794,8 +794,8 @@ export const CalendarItem = React.forwardRef<
         onScroll={monthsViewScroll}
         ref={monthsRef}
       >
-        <div className={`${classPrefix}-pannel`} ref={monthsPanel}>
-          <div
+        <View className={`${classPrefix}-pannel`} ref={monthsPanel}>
+          <View
             className="viewArea"
             ref={viewAreaRef}
             style={{ transform: `translateY(${translateY}px)` }}
@@ -804,13 +804,13 @@ export const CalendarItem = React.forwardRef<
               .slice(monthDefaultRange[0], monthDefaultRange[1])
               .map((month: any, key: number) => {
                 return (
-                  <div className={`${classPrefix}-month`} key={key}>
-                    <div className={`${classPrefix}-month-title`}>
+                  <View className={`${classPrefix}-month`} key={key}>
+                    <View className={`${classPrefix}-month-title`}>
                       {month.title}
-                    </div>
-                    <div className={`${classPrefix}-days`}>
+                    </View>
+                    <View className={`${classPrefix}-days`}>
                       {month.monthData.map((day: CalendarDay, i: number) => (
-                        <div
+                        <View
                           className={[
                             `${classPrefix}-day`,
                             getClasses(day, month),
@@ -820,32 +820,34 @@ export const CalendarItem = React.forwardRef<
                           }}
                           key={i}
                         >
-                          <div className={`${classPrefix}-day-day`}>
+                          <View className={`${classPrefix}-day-day`}>
                             {renderDay ? renderDay(day) : day.day}
-                          </div>
+                          </View>
                           {!isStartTip(day, month) && renderDayTop && (
-                            <div className={`${classPrefix}-day-info-top`}>
+                            <View className={`${classPrefix}-day-info-top`}>
                               {renderDayTop(day)}
-                            </div>
+                            </View>
                           )}
                           {!isStartTip(day, month) &&
                             !isEndTip(day, month) &&
                             renderDayBottom && (
-                              <div className={`${classPrefix}-day-info-bottom`}>
+                              <View
+                                className={`${classPrefix}-day-info-bottom`}
+                              >
                                 {renderDayBottom(day)}
-                              </div>
+                              </View>
                             )}
                           {!isStartTip(day, month) &&
                             !isEndTip(day, month) &&
                             !renderDayBottom &&
                             showToday &&
                             isCurrDay(month, day.day) && (
-                              <div className={`${classPrefix}-day-info-curr`}>
+                              <View className={`${classPrefix}-day-info-curr`}>
                                 {locale.calendaritem.today}
-                              </div>
+                              </View>
                             )}
                           {isStartTip(day, month) && (
-                            <div
+                            <View
                               className={`${classPrefix}-day-info ${
                                 isStartAndEnd(currentDate as string[])
                                   ? `${classPrefix}-day-info-top`
@@ -853,43 +855,43 @@ export const CalendarItem = React.forwardRef<
                               }`}
                             >
                               {startText || locale.calendaritem.start}
-                            </div>
+                            </View>
                           )}
                           {isEndTip(day, month) && (
-                            <div className={`${classPrefix}-day-info`}>
+                            <View className={`${classPrefix}-day-info`}>
                               {endText || locale.calendaritem.end}
-                            </div>
+                            </View>
                           )}
-                        </div>
+                        </View>
                       ))}
-                    </div>
-                  </div>
+                    </View>
+                  </View>
                 )
               })}
-          </div>
-        </div>
+          </View>
+        </View>
       </ScrollView>
     )
   }
 
   const renderFooter = () => {
     return (
-      <div className="nut-calendar-footer">
+      <View className="nut-calendar-footer">
         {children}
-        <div className="calendar-confirm-btn" onClick={confirm}>
+        <View className="calendar-confirm-btn" onClick={confirm}>
           {confirmText || locale.confirm}
-        </div>
-      </div>
+        </View>
+      </View>
     )
   }
 
   return (
     <>
-      <div className={classes} style={style}>
+      <View className={classes} style={style}>
         {renderHeader()}
         {renderContent()}
         {popup && !autoBackfill ? renderFooter() : ''}
-      </div>
+      </View>
     </>
   )
 })
diff --git a/src/packages/cascader/cascader.taro.tsx b/src/packages/cascader/cascader.taro.tsx
index cf8f94cab2..00a9d08f5e 100644
--- a/src/packages/cascader/cascader.taro.tsx
+++ b/src/packages/cascader/cascader.taro.tsx
@@ -9,7 +9,7 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 import { Loading, Checklist } from '@nutui/icons-react-taro'
-import { ScrollView } from '@tarojs/components'
+import { ScrollView, View } from '@tarojs/components'
 import { Popup, PopupProps } from '@/packages/popup/popup.taro'
 import { Tabs } from '@/packages/tabs/tabs.taro'
 import Tree, { convertListToOptions } from './utils'
@@ -400,7 +400,7 @@ const InternalCascader: ForwardRefRenderFunction<
     }
 
     return (
-      <div
+      <View
         style={{ color: checked ? activeColor : '' }}
         className={classes}
         key={index}
@@ -408,24 +408,24 @@ const InternalCascader: ForwardRefRenderFunction<
           chooseItem(node, false)
         }}
       >
-        <div className={classesTitle}>{node.text}</div>
+        <View className={classesTitle}>{node.text}</View>
         {node.loading ? (
           <Loading color="#969799" className="nut-cascader-item-icon-loading" />
         ) : (
           renderIcon()
         )}
-      </div>
+      </View>
     )
   }
 
   const renderTabs = () => {
     return (
-      <div className={`${classPrefix} ${className}`} style={style}>
+      <View className={`${classPrefix} ${className}`} style={style}>
         <Tabs
           value={tabvalue}
           title={() => {
             return optionsData.map((pane, index) => (
-              <div
+              <View
                 onClick={() => {
                   setTabvalue(pane.paneKey)
                   state.tabsCursor = index
@@ -446,7 +446,7 @@ const InternalCascader: ForwardRefRenderFunction<
                   {!(!state.initLoading && state.panes.length) && 'Loading...'}
                 </span>
                 <span className="nut-tabs-titles-item-line" />
-              </div>
+              </View>
             ))
           }}
         >
@@ -462,11 +462,11 @@ const InternalCascader: ForwardRefRenderFunction<
             ))
           ) : (
             <Tabs.TabPane>
-              <div className={classesPane} />
+              <View className={classesPane} />
             </Tabs.TabPane>
           )}
         </Tabs>
-      </div>
+      </View>
     )
   }
 
diff --git a/src/packages/cascader/demo.taro.tsx b/src/packages/cascader/demo.taro.tsx
index 4227dbb103..2d889365c1 100644
--- a/src/packages/cascader/demo.taro.tsx
+++ b/src/packages/cascader/demo.taro.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -40,20 +41,20 @@ const CascaderDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2>{translated.title1}</h2>
+        <View className="h2">{translated.title1}</View>
         <Demo2 />
-        <h2>{translated.title2}</h2>
+        <View className="h2">{translated.title2}</View>
         <Demo3 />
-        <h2>{translated.title3}</h2>
+        <View className="h2">{translated.title3}</View>
         <Demo4 />
-        <h2>{translated.title4}</h2>
+        <View className="h2">{translated.title4}</View>
         <Demo5 />
-        <h2>{translated.title5}</h2>
+        <View className="h2">{translated.title5}</View>
         <Demo6 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/drag/demo.taro.tsx b/src/packages/drag/demo.taro.tsx
index 3453ba2c45..26525bbe82 100644
--- a/src/packages/drag/demo.taro.tsx
+++ b/src/packages/drag/demo.taro.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 
@@ -35,19 +36,22 @@ const DragDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${isTaroWeb ? 'web' : 'full'}`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView className={`demo ${isTaroWeb ? 'web' : 'full'}`}>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-
-        <h2 style={{ paddingTop: '30px' }}>{translated.direction}</h2>
+        <View className="h2" style={{ paddingTop: '30px' }}>
+          {translated.direction}
+        </View>
         <Demo2 />
-
-        <h2 style={{ paddingTop: '30px' }}>{translated.attract}</h2>
+        <View className="h2" style={{ paddingTop: '30px' }}>
+          {translated.attract}
+        </View>
         <Demo3 />
-
-        <h2 style={{ paddingTop: '30px' }}>{translated.limitBoundaries}</h2>
+        <View className="h2" style={{ paddingTop: '30px' }}>
+          {translated.limitBoundaries}
+        </View>
         <Demo4 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/elevator/demo.taro.tsx b/src/packages/elevator/demo.taro.tsx
index 8fffb3be63..bd564640be 100644
--- a/src/packages/elevator/demo.taro.tsx
+++ b/src/packages/elevator/demo.taro.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -155,28 +156,18 @@ const ElevatorDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.basic}</h2>
-        <div style={{ background: 'white' }}>
-          <Demo1 />
-        </div>
-        <h2>{translated.customIndex}</h2>
-        <div style={{ background: 'white' }}>
-          <Demo2 />
-        </div>
-        <h2>{translated.showKeys}</h2>
-        <div style={{ background: 'white' }}>
-          <Demo3 />
-        </div>
-        <h2>{translated.sticky}</h2>
-        <div style={{ background: 'white' }}>
-          <Demo4 />
-        </div>
-        <h2>{translated.customContent}</h2>
-        <div style={{ background: 'white' }}>
-          <Demo5 />
-        </div>
-      </div>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.basic}</View>
+        <Demo1 />
+        <View className="h2">{translated.customIndex}</View>
+        <Demo2 />
+        <View className="h2">{translated.showKeys}</View>
+        <Demo3 />
+        <View className="h2">{translated.sticky}</View>
+        <Demo4 />
+        <View className="h2">{translated.customContent}</View>
+        <Demo5 />
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/elevator/elevator.taro.tsx b/src/packages/elevator/elevator.taro.tsx
index 354aee0bd7..9e1aa69d18 100644
--- a/src/packages/elevator/elevator.taro.tsx
+++ b/src/packages/elevator/elevator.taro.tsx
@@ -7,7 +7,7 @@ import React, {
 } from 'react'
 import Taro, { nextTick, createSelectorQuery } from '@tarojs/taro'
 
-import { ScrollView } from '@tarojs/components'
+import { ScrollView, View } from '@tarojs/components'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
@@ -222,7 +222,7 @@ export const Elevator: FunctionComponent<
 
   return (
     <div className={`${classPrefix} ${className}`} style={style} {...rest}>
-      <div
+      <View
         className={`${classPrefix}-list`}
         style={{ height: Number.isNaN(+height) ? height : `${height}px` }}
       >
@@ -241,17 +241,17 @@ export const Elevator: FunctionComponent<
         >
           {list.map((item: any, idx: number) => {
             return (
-              <div
+              <View
                 className={`${classPrefix}-list-item nut-elevator-item-${idx}`}
                 key={idx}
               >
-                <div className={`${classPrefix}-list-item-code`}>
+                <View className={`${classPrefix}-list-item-code`}>
                   {item[floorKey]}
-                </div>
+                </View>
                 <>
                   {item.list.map((subitem: ElevatorData) => {
                     return (
-                      <div
+                      <View
                         className={classNames({
                           [`${classPrefix}-list-item-name`]: true,
                           [`${classPrefix}-list-item-name-highcolor`]:
@@ -270,29 +270,29 @@ export const Elevator: FunctionComponent<
                         ) : (
                           subitem.name
                         )}
-                      </div>
+                      </View>
                     )
                   })}
                 </>
-              </div>
+              </View>
             )
           })}
         </ScrollView>
-      </div>
+      </View>
       {showKeys ? (
         <>
           {list.length && scrollStart ? (
-            <div
+            <View
               className={classNames({
                 [`${classPrefix}-code-current`]: true,
                 [`${classPrefix}-code-current-current`]: true,
               })}
             >
               {list[codeIndex][floorKey]}
-            </div>
+            </View>
           ) : null}
-          <div className={`${classPrefix}-bars`}>
-            <div
+          <View className={`${classPrefix}-bars`}>
+            <View
               className={`${classPrefix}-bars-inner`}
               onTouchStart={(event) => touchStart(event)}
               onTouchMove={(event) => touchMove(event)}
@@ -301,7 +301,7 @@ export const Elevator: FunctionComponent<
             >
               {list.map((item: any, index: number) => {
                 return (
-                  <div
+                  <View
                     className={classNames({
                       [`${classPrefix}-bars-inner-item`]: true,
                       [`${classPrefix}-bars-inner-item-active`]:
@@ -312,19 +312,19 @@ export const Elevator: FunctionComponent<
                     onClick={() => handleClickIndex(item[floorKey])}
                   >
                     {item[floorKey]}
-                  </div>
+                  </View>
                 )
               })}
-            </div>
-          </div>
+            </View>
+          </View>
         </>
       ) : null}
       {sticky && scrollY > 0 ? (
-        <div className={`${classPrefix}-list-fixed`}>
+        <View className={`${classPrefix}-list-fixed`}>
           <span className={`${classPrefix}-list-fixed-title`}>
             {list[codeIndex][floorKey]}
           </span>
-        </div>
+        </View>
       ) : null}
     </div>
   )
diff --git a/src/packages/ellipsis/demo.taro.tsx b/src/packages/ellipsis/demo.taro.tsx
index 7fe192afc4..c907aab0f9 100644
--- a/src/packages/ellipsis/demo.taro.tsx
+++ b/src/packages/ellipsis/demo.taro.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
-
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
@@ -41,20 +41,20 @@ const EllipsisDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.header}</h2>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.header}</View>
         <Demo1 />
-        <h2>{translated.end}</h2>
+        <View className="h2">{translated.end}</View>
         <Demo2 />
-        <h2>{translated.middle}</h2>
+        <View className="h2">{translated.middle}</View>
         <Demo3 />
-        <h2>{translated.rows}</h2>
+        <View className="h2">{translated.rows}</View>
         <Demo4 />
-        <h2>{translated.expandCollapse}</h2>
+        <View className="h2">{translated.expandCollapse}</View>
         <Demo5 />
-        <h2>{translated.width}</h2>
+        <View className="h2">{translated.width}</View>
         <Demo6 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/fixednav/demo.taro.tsx b/src/packages/fixednav/demo.taro.tsx
index f9086afecd..c161ebe614 100644
--- a/src/packages/fixednav/demo.taro.tsx
+++ b/src/packages/fixednav/demo.taro.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView } from '@tarojs/components'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
@@ -11,14 +12,14 @@ const FixedNavDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <Demo1 />
         <Demo2 />
         <Demo3 />
         <Demo4 />
         {/* <!-- 配合 Drag 支持拖拽 ，小程序暂不支持 --> */}
         <Demo5 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/fixednav/fixednav.taro.tsx b/src/packages/fixednav/fixednav.taro.tsx
index 1403ce2639..ae59d2b78d 100644
--- a/src/packages/fixednav/fixednav.taro.tsx
+++ b/src/packages/fixednav/fixednav.taro.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent, MouseEvent } from 'react'
 import classNames from 'classnames'
 import { ArrowLeft } from '@nutui/icons-react-taro'
+import { View } from '@tarojs/components'
 import Overlay from '@/packages/overlay/index.taro'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -97,12 +98,12 @@ export const FixedNav: FunctionComponent<
           onClick={() => onUpdateValue(false)}
         />
       )}
-      <div className="list">
+      <View className="list">
         {children || (
-          <div className={`${classPrefix}-list`}>
+          <View className={`${classPrefix}-list`}>
             {list.map((item: any, index) => {
               return (
-                <div
+                <View
                   className={`${classPrefix}-list-item`}
                   onClick={(event) => handleClick(item, event)}
                   key={item.id || index}
@@ -112,27 +113,29 @@ export const FixedNav: FunctionComponent<
                   ) : (
                     <img src={item.icon} alt="" />
                   )}
-                  <div className={`${classPrefix}-list-text`}>{item.text}</div>
-                  {item.num && <div className="b">{item.num}</div>}
-                </div>
+                  <View className={`${classPrefix}-list-text`}>
+                    {item.text}
+                  </View>
+                  {item.num && <View className="b">{item.num}</View>}
+                </View>
               )
             })}
-          </div>
+          </View>
         )}
-      </div>
+      </View>
 
-      <div className={`${classPrefix}-btn`} onClick={() => onUpdateValue()}>
+      <View className={`${classPrefix}-btn`} onClick={() => onUpdateValue()}>
         {content || (
           <>
             <ArrowLeft color="#fff" />
-            <div className="text">
+            <View className="text">
               {visible
                 ? activeText || locale.fixednav.activeText
                 : inactiveText || locale.fixednav.inactiveText}
-            </div>
+            </View>
           </>
         )}
-      </div>
+      </View>
     </div>
   )
 }
diff --git a/src/packages/form/demo.taro.tsx b/src/packages/form/demo.taro.tsx
index 3881c4d845..f1a8072cb0 100644
--- a/src/packages/form/demo.taro.tsx
+++ b/src/packages/form/demo.taro.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -35,22 +36,22 @@ const FormDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2>{translated.title2}</h2>
+        <View className="h2">{translated.title2}</View>
         <Demo2 />
-        <h2>{translated.relatedDisplay}</h2>
+        <View className="h2">{translated.relatedDisplay}</View>
         <Demo3 />
-        <h2>{translated.title3}</h2>
+        <View className="h2">{translated.title3}</View>
         <Demo4 />
-        <h2>{translated.title4}</h2>
+        <View className="h2">{translated.title4}</View>
         <Demo5 />
-        <h2>{translated.validateTrigger}</h2>
+        <View className="h2">{translated.validateTrigger}</View>
         <Demo6 />
-        <h2>{translated.title5}</h2>
+        <View className="h2">{translated.title5}</View>
         <Demo7 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/form/demos/taro/demo4.tsx b/src/packages/form/demos/taro/demo4.tsx
index ec294daa3f..57a9860995 100644
--- a/src/packages/form/demos/taro/demo4.tsx
+++ b/src/packages/form/demos/taro/demo4.tsx
@@ -6,6 +6,7 @@ import {
   Button,
   type FormItemRuleWithoutValidator,
 } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo4 = () => {
   const submitFailed = (error: any) => {
@@ -36,7 +37,7 @@ const Demo4 = () => {
         onFinish={(values) => submitSucceed(values)}
         onFinishFailed={(values, errors) => submitFailed(errors)}
         footer={
-          <div
+          <View
             style={{
               display: 'flex',
               justifyContent: 'center',
@@ -49,7 +50,7 @@ const Demo4 = () => {
             <Button nativeType="reset" style={{ marginLeft: '20px' }}>
               重置
             </Button>
-          </div>
+          </View>
         }
       >
         <Form.Item
diff --git a/src/packages/form/demos/taro/demo7.tsx b/src/packages/form/demos/taro/demo7.tsx
index b916be1409..bee2dae660 100644
--- a/src/packages/form/demos/taro/demo7.tsx
+++ b/src/packages/form/demos/taro/demo7.tsx
@@ -14,6 +14,7 @@ import {
   Range,
 } from '@nutui/nutui-react-taro'
 import { ArrowRight } from '@nutui/icons-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo7 = () => {
   const pickerOptions = [
@@ -37,7 +38,7 @@ const Demo7 = () => {
       <Form
         style={{ '--nutui-form-item-label-width': '120px' }}
         footer={
-          <div
+          <View
             style={{
               display: 'flex',
               justifyContent: 'center',
@@ -50,7 +51,7 @@ const Demo7 = () => {
             <Button nativeType="reset" style={{ marginLeft: '20px' }}>
               重置
             </Button>
-          </div>
+          </View>
         }
         onFinish={(values) => submitSucceed(values)}
         onFinishFailed={(values, errors) => submitFailed(errors)}
diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
index 5d7e982303..e1c459df51 100644
--- a/src/packages/formitem/formitem.taro.tsx
+++ b/src/packages/formitem/formitem.taro.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react'
+import { View } from '@tarojs/components'
 import { BaseFormField } from './types'
 import { Context } from '../form/context'
 import Cell from '@/packages/cell/index.taro'
@@ -223,13 +224,13 @@ export class FormItem extends React.Component<
         }
       >
         {label ? (
-          <div className="nut-cell-title nut-form-item-label">
+          <View className="nut-cell-title nut-form-item-label">
             {renderLabel}
-          </div>
+          </View>
         ) : null}
-        <div className="nut-cell-value nut-form-item-body">
-          <div className="nut-form-item-body-slots">{childNode}</div>
-          <div
+        <View className="nut-cell-value nut-form-item-body">
+          <View className="nut-form-item-body-slots">{childNode}</View>
+          <View
             className="nut-form-item-body-tips"
             style={{
               textAlign: errorMessageAlign,
@@ -237,8 +238,8 @@ export class FormItem extends React.Component<
             }}
           >
             {item?.[0]?.message}
-          </div>
-        </div>
+          </View>
+        </View>
       </Cell>
     )
   }
diff --git a/src/packages/infiniteloading/demo.taro.tsx b/src/packages/infiniteloading/demo.taro.tsx
index 0a0564be11..8d30c4895f 100644
--- a/src/packages/infiniteloading/demo.taro.tsx
+++ b/src/packages/infiniteloading/demo.taro.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
-
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
@@ -40,16 +40,16 @@ const InfiniteLoadingDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated['84aa6bce']}</h2>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated['84aa6bce']}</View>
         <Demo1 />
-        <h2>{translated.eb4236fe}</h2>
+        <View className="h2">{translated.eb4236fe}</View>
         <Demo2 />
-        <h2>{translated['9ed40460']}</h2>
+        <View className="h2">{translated['9ed40460']}</View>
         <Demo3 />
-        <h2>{translated['1254a90d']}</h2>
+        <View className="h2">{translated['1254a90d']}</View>
         <Demo4 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/infiniteloading/infiniteloading.taro.tsx b/src/packages/infiniteloading/infiniteloading.taro.tsx
index f0807d2432..7b23661834 100644
--- a/src/packages/infiniteloading/infiniteloading.taro.tsx
+++ b/src/packages/infiniteloading/infiniteloading.taro.tsx
@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react'
 import classNames from 'classnames'
-import { ScrollView, ScrollViewProps } from '@tarojs/components'
+import { ScrollView, ScrollViewProps, View } from '@tarojs/components'
 import { createSelectorQuery } from '@tarojs/taro'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 
@@ -179,25 +179,25 @@ export const InfiniteLoading: FunctionComponent<
       onTouchEnd={touchEnd}
       {...rest}
     >
-      <div className="nut-infinite-top" ref={refreshTop} style={getStyle()}>
-        <div className="nut-infinite-top-tips">
+      <View className="nut-infinite-top" ref={refreshTop} style={getStyle()}>
+        <View className="nut-infinite-top-tips">
           {pullingText || locale.infiniteloading.pullRefreshText}
-        </div>
-      </div>
-      <div className="nut-infinite-container">{children}</div>
-      <div className="nut-infinite-bottom">
+        </View>
+      </View>
+      <View className="nut-infinite-container">{children}</View>
+      <View className="nut-infinite-bottom">
         {isInfiniting ? (
-          <div className="nut-infinite-bottom-tips">
+          <View className="nut-infinite-bottom-tips">
             {loadingText || locale.infiniteloading.loadText}
-          </div>
+          </View>
         ) : (
           !hasMore && (
-            <div className="nut-infinite-bottom-tips">
+            <View className="nut-infinite-bottom-tips">
               {loadMoreText || locale.infiniteloading.loadMoreText}
-            </div>
+            </View>
           )
         )}
-      </div>
+      </View>
     </ScrollView>
   )
 }
diff --git a/src/packages/loading/demo.taro.tsx b/src/packages/loading/demo.taro.tsx
index 2b1ce91d7b..6c08246534 100644
--- a/src/packages/loading/demo.taro.tsx
+++ b/src/packages/loading/demo.taro.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { ScrollView, View } from '@tarojs/components'
 import Header from '@/sites/components/header'
 import { useTranslate } from '../../sites/assets/locale/taro'
 import Demo1 from './demos/taro/demo1'
@@ -47,24 +48,24 @@ const LoadingDemo = () => {
   return (
     <>
       <Header />
-      <div className="demo">
-        <h2>{translated.title1}</h2>
+      <ScrollView className="demo">
+        <View className="h2">{translated.title1}</View>
         <Demo1 />
-        <h2>{translated.title2}</h2>
+        <View className="h2">{translated.title2}</View>
         <Demo2 />
-        <h2>{translated.title3}</h2>
+        <View className="h2">{translated.title3}</View>
         <Demo3 />
-        <h2>{translated.title4}</h2>
+        <View className="h2">{translated.title4}</View>
         <Demo4 />
-        <h2>{translated.title5}</h2>
+        <View className="h2">{translated.title5}</View>
         <Demo5 />
-        <h2>{translated.title6}</h2>
+        <View className="h2">{translated.title6}</View>
         <Demo6 />
-        <h2>{translated.title7}</h2>
+        <View className="h2">{translated.title7}</View>
         <Demo7 />
-        <h2>{translated.title8}</h2>
+        <View className="h2">{translated.title8}</View>
         <Demo8 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/loading/loading.taro.tsx b/src/packages/loading/loading.taro.tsx
index 48113beb98..8cd916d5ff 100644
--- a/src/packages/loading/loading.taro.tsx
+++ b/src/packages/loading/loading.taro.tsx
@@ -4,6 +4,7 @@ import {
   Loading as IconLoading,
   Loading1 as IconLoading1,
 } from '@nutui/icons-react-taro'
+import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
 export type LoadingType = 'spinner' | 'circular'
@@ -39,7 +40,7 @@ export const Loading: FunctionComponent<
   const CurLoadingIcon = loadingMap[rest.type] || IconLoading1
 
   return (
-    <div
+    <View
       className={classNames(
         classPrefix,
         direction === 'vertical' ? `${classPrefix}-vertical` : '',
@@ -47,11 +48,15 @@ export const Loading: FunctionComponent<
       )}
       style={style}
     >
-      <div className={`${classPrefix}-icon-box`}>
+      <View className={`${classPrefix}-icon-box`}>
         {icon || <CurLoadingIcon className={`${classPrefix}-icon`} />}
-      </div>
-      {children ? <div className={`${classPrefix}-text`}>{children}</div> : ''}
-    </div>
+      </View>
+      {children ? (
+        <View className={`${classPrefix}-text`}>{children}</View>
+      ) : (
+        ''
+      )}
+    </View>
   )
 }
 
diff --git a/src/packages/menu/demo.taro.tsx b/src/packages/menu/demo.taro.tsx
index 07c754965c..d1df6c6ae9 100644
--- a/src/packages/menu/demo.taro.tsx
+++ b/src/packages/menu/demo.taro.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -38,24 +39,26 @@ const MenuDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo full ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView
+        className={`demo full ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}
+      >
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2>{translated.controlled}</h2>
+        <View className="h2">{translated.controlled}</View>
         <Demo2 />
-        <h2>{translated.customMenuContent}</h2>
+        <View className="h2">{translated.customMenuContent}</View>
         <Demo3 />
-        <h2>{translated.twoColsInOneLine}</h2>
+        <View className="h2">{translated.twoColsInOneLine}</View>
         <Demo4 />
-        <h2>{translated.customActiveColor}</h2>
+        <View className="h2">{translated.customActiveColor}</View>
         <Demo5 />
-        <h2>{translated.customIcons}</h2>
+        <View className="h2">{translated.customIcons}</View>
         <Demo6 />
-        <h2>{translated.expandDirection}</h2>
+        <View className="h2">{translated.expandDirection}</View>
         <Demo7 />
-        <h2>{translated.disableMenu}</h2>
+        <View className="h2">{translated.disableMenu}</View>
         <Demo8 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/menu/menu.taro.tsx b/src/packages/menu/menu.taro.tsx
index 78f591e006..c517f0ea02 100644
--- a/src/packages/menu/menu.taro.tsx
+++ b/src/packages/menu/menu.taro.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
 import { ArrowDown, ArrowUp } from '@nutui/icons-react-taro'
+import { View } from '@tarojs/components'
 import { OptionItem, MenuItem } from '@/packages/menuitem/menuitem.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
@@ -134,7 +135,7 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
           return ''
         }
         return (
-          <div
+          <View
             className={classNames(
               'nut-menu-title ',
               {
@@ -150,36 +151,36 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
               !disabled && toggleMenuItem(index)
             }}
           >
-            <div className="nut-menu-title-text">{finallyTitle()}</div>
+            <View className="nut-menu-title-text">{finallyTitle()}</View>
             {icon ||
               (direction === 'up' ? (
                 <ArrowUp className="nut-menu-title-icon" size="12px" />
               ) : (
                 <ArrowDown className="nut-menu-title-icon" size="12px" />
               ))}
-          </div>
+          </View>
         )
       }
       return null
     })
   }
   return (
-    <div
+    <View
       {...rest}
       className={classNames(`nut-menu`, className, {
         'scroll-fixed': isScrollFixed,
       })}
       ref={menuRef}
     >
-      <div
+      <View
         className={classNames('nut-menu-bar', {
           opened: showMenuItem.includes(true),
         })}
       >
         {menuTitle()}
-      </div>
+      </View>
       {cloneChildren()}
-    </div>
+    </View>
   )
 }
 
diff --git a/src/packages/navbar/demo.taro.tsx b/src/packages/navbar/demo.taro.tsx
index 4fa0f9456c..f31e7f983e 100644
--- a/src/packages/navbar/demo.taro.tsx
+++ b/src/packages/navbar/demo.taro.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import './demo.scss'
@@ -28,14 +29,14 @@ const NavBarDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2>{translated.title1}</h2>
+        <View className="h2">{translated.title1}</View>
         <Demo2 />
-        <h2>{translated.title2}</h2>
+        <View className="h2">{translated.title2}</View>
         <Demo3 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/navbar/demos/taro/demo1.tsx b/src/packages/navbar/demos/taro/demo1.tsx
index 3f9b4d5087..80a73e7d8a 100644
--- a/src/packages/navbar/demos/taro/demo1.tsx
+++ b/src/packages/navbar/demos/taro/demo1.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { NavBar } from '@nutui/nutui-react-taro'
 import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react-taro'
 import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
 
 const Demo1 = () => {
   return (
@@ -33,12 +34,12 @@ const Demo1 = () => {
         back={<ArrowLeft size={14} />}
         onBackClick={(e) => Taro.showToast({ title: '返回' })}
       >
-        <div className="title">
+        <View className="title">
           <span onClick={(e) => Taro.showToast({ title: '清空' })}>
             浏览记录
           </span>
           <span className="desc">浏览记录</span>
-        </div>
+        </View>
       </NavBar>
       <NavBar
         back={<ArrowLeft size={14} />}
diff --git a/src/packages/navbar/demos/taro/demo2.tsx b/src/packages/navbar/demos/taro/demo2.tsx
index 77104540ed..3ad124c61f 100644
--- a/src/packages/navbar/demos/taro/demo2.tsx
+++ b/src/packages/navbar/demos/taro/demo2.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { NavBar } from '@nutui/nutui-react-taro'
 import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react-taro'
 import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
 
 const Demo2 = () => {
   return (
@@ -36,12 +37,12 @@ const Demo2 = () => {
         back={<ArrowLeft size={14} />}
         onBackClick={(e) => Taro.showToast({ title: '返回' })}
       >
-        <div className="title">
+        <View className="title">
           <span onClick={(e) => Taro.showToast({ title: '清空' })}>
             浏览记录
           </span>
           <span className="desc">浏览记录</span>
-        </div>
+        </View>
       </NavBar>
       <NavBar
         titleAlign="left"
diff --git a/src/packages/navbar/demos/taro/demo3.tsx b/src/packages/navbar/demos/taro/demo3.tsx
index 0da9583eb9..4ddbc14029 100644
--- a/src/packages/navbar/demos/taro/demo3.tsx
+++ b/src/packages/navbar/demos/taro/demo3.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { NavBar, Tabs, TabPane } from '@nutui/nutui-react-taro'
 import { More, ArrowLeft } from '@nutui/icons-react-taro'
 import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
 
 const Demo3 = () => {
   const [tab1value, setTab1value] = useState<string | number>('0')
@@ -26,7 +27,7 @@ const Demo3 = () => {
         }
         onBackClick={(e) => Taro.showToast({ title: '返回' })}
       >
-        <div style={{ width: '100%' }}>
+        <View style={{ width: '100%' }}>
           <Tabs
             value={tab1value}
             onChange={(paneKey) => {
@@ -41,7 +42,7 @@ const Demo3 = () => {
             <TabPane title="Tab 3"> Tab 3 </TabPane>
             <TabPane title="Tab 4"> Tab 4 </TabPane>
           </Tabs>
-        </div>
+        </View>
       </NavBar>
 
       <NavBar
diff --git a/src/packages/numberkeyboard/demo.taro.tsx b/src/packages/numberkeyboard/demo.taro.tsx
index 24afa39ef2..f52f220af0 100644
--- a/src/packages/numberkeyboard/demo.taro.tsx
+++ b/src/packages/numberkeyboard/demo.taro.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
-
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
@@ -47,20 +47,20 @@ const NumberKeyboardDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2>{translated.sidebar}</h2>
+        <View className="h2">{translated.sidebar}</View>
         <Demo2 />
-        <h2>{translated.randomKeyOrder}</h2>
+        <View className="h2">{translated.randomKeyOrder}</View>
         <Demo3 />
-        <h2>{translated.withTitle}</h2>
+        <View className="h2">{translated.withTitle}</View>
         <Demo4 />
-        <h2>{translated.idNumberKeyboard}</h2>
+        <View className="h2">{translated.idNumberKeyboard}</View>
         <Demo5 />
-        <h2>{translated.popup}</h2>
+        <View className="h2">{translated.popup}</View>
         <Demo6 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/numberkeyboard/numberkeyboard.taro.tsx b/src/packages/numberkeyboard/numberkeyboard.taro.tsx
index 6b892ef90a..a82b0e9f15 100644
--- a/src/packages/numberkeyboard/numberkeyboard.taro.tsx
+++ b/src/packages/numberkeyboard/numberkeyboard.taro.tsx
@@ -114,8 +114,8 @@ export const NumberKeyboard: FunctionComponent<
       }
     }
     return (
-      <div key={item.id} className={`${classPrefix}-body-wrapper`}>
-        <div
+      <View key={item.id} className={`${classPrefix}-body-wrapper`}>
+        <View
           className={classNames({
             key: true,
             active,
@@ -128,13 +128,13 @@ export const NumberKeyboard: FunctionComponent<
           onTouchCancel={() => onTouchEnd(item)}
         >
           {(item.type === 'num' || item.type === 'custom') && (
-            <div>{item.id}</div>
+            <View>{item.id}</View>
           )}
           {item.type === 'delete' && <DeleteIcon />}
           {item.type === 'close' && <ArrowDown size={18} />}
           {item.type === 'confirm' && <>{confirmText || locale.done}</>}
-        </div>
-      </div>
+        </View>
+      </View>
     )
   }
 
@@ -148,10 +148,10 @@ export const NumberKeyboard: FunctionComponent<
       overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0)' }}
       {...rest}
     >
-      <div className={classNames(classPrefix, className)} style={style}>
+      <View className={classNames(classPrefix, className)} style={style}>
         {title && (
-          <div className={`${classPrefix}-header`}>
-            <div className={`${classPrefix}-header-title`}>{title}</div>
+          <View className={`${classPrefix}-header`}>
+            <View className={`${classPrefix}-header-title`}>{title}</View>
             {type === 'default' && (
               <span
                 className={`${classPrefix}-header-close`}
@@ -160,16 +160,16 @@ export const NumberKeyboard: FunctionComponent<
                 {rightActions || locale.done}
               </span>
             )}
-          </div>
+          </View>
         )}
-        <div className={`${classPrefix}-body`}>
-          <div className={`${classPrefix}-body-keys`}>
+        <View className={`${classPrefix}-body`}>
+          <View className={`${classPrefix}-body-keys`}>
             {keysList?.map((item: any) => {
               return <NumberKeyboardKey key={item.id} item={item} />
             })}
-          </div>
+          </View>
           {type === 'rightColumn' && (
-            <div className={`${classPrefix}-sidebar`}>
+            <View className={`${classPrefix}-sidebar`}>
               <NumberKeyboardKey
                 key="delete"
                 item={{
@@ -184,10 +184,10 @@ export const NumberKeyboard: FunctionComponent<
                   type: 'confirm',
                 }}
               />
-            </div>
+            </View>
           )}
-        </div>
-      </div>
+        </View>
+      </View>
     </Popup>
   )
 }
diff --git a/src/packages/picker/pickerpanel.taro.tsx b/src/packages/picker/pickerpanel.taro.tsx
index 8a593f9eeb..8a5975c1c6 100644
--- a/src/packages/picker/pickerpanel.taro.tsx
+++ b/src/packages/picker/pickerpanel.taro.tsx
@@ -5,6 +5,7 @@ import React, {
   ForwardRefRenderFunction,
   useImperativeHandle,
 } from 'react'
+import { View } from '@tarojs/components'
 import { PickerOption } from './types'
 import { useTouch } from '@/utils/use-touch'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
@@ -264,8 +265,8 @@ const InternalPickerPanel: ForwardRefRenderFunction<
   })
 
   return (
-    <div className="nut-picker-list" ref={pickerPanelRef}>
-      <div
+    <View className="nut-picker-list" ref={pickerPanelRef}>
+      <View
         className="nut-picker-roller"
         ref={rollerRef}
         style={threeDimensional ? touchRollerStyle() : touchTileStyle()}
@@ -275,7 +276,7 @@ const InternalPickerPanel: ForwardRefRenderFunction<
         {threeDimensional &&
           options.map((item, index) => {
             return (
-              <div
+              <View
                 className={`nut-picker-roller-item ${
                   isHidden(index + 1) && 'nut-picker-roller-item-hidden'
                 }`}
@@ -289,14 +290,14 @@ const InternalPickerPanel: ForwardRefRenderFunction<
                 key={item.value ? item.value : index}
               >
                 <>{item.text}</>
-              </div>
+              </View>
             )
           })}
         {/* 平铺 */}
         {!threeDimensional &&
           options.map((item, index) => {
             return (
-              <div
+              <View
                 className="nut-picker-roller-item-title"
                 key={item.value ? item.value : index}
                 style={{
@@ -305,13 +306,13 @@ const InternalPickerPanel: ForwardRefRenderFunction<
                 }}
               >
                 <>{item.text}</>
-              </div>
+              </View>
             )
           })}
-      </div>
-      <div className="nut-picker-mask" />
-      <div className="nut-picker-indicator" ref={listRef} />
-    </div>
+      </View>
+      <View className="nut-picker-mask" />
+      <View className="nut-picker-indicator" ref={listRef} />
+    </View>
   )
 }
 const PickerPanel = React.forwardRef<
diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx
index 7e6ffa60bf..4fcd3d5bb2 100644
--- a/src/packages/popover/popover.taro.tsx
+++ b/src/packages/popover/popover.taro.tsx
@@ -7,6 +7,7 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 import Taro, { createSelectorQuery } from '@tarojs/taro'
+import { View } from '@tarojs/components'
 import Popup from '@/packages/popup/index.taro'
 import { PopupProps } from '@/packages/popup/popup.taro'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
@@ -285,7 +286,7 @@ export const Popover: FunctionComponent<
   return (
     <>
       {!targetId && (
-        <div
+        <View
           className="nut-popover-wrapper"
           ref={popoverRef}
           onClick={() => {
@@ -299,9 +300,9 @@ export const Popover: FunctionComponent<
           style={style}
         >
           {Array.isArray(children) ? children[0] : children}
-        </div>
+        </View>
       )}
-      <div className={classes} style={getRootPosition()}>
+      <View className={classes} style={getRootPosition()}>
         <Popup
           className={`nut-popover-content nut-popover-content-${location}`}
           position="default"
@@ -309,14 +310,14 @@ export const Popover: FunctionComponent<
           visible={showPopup}
           {...rest}
         >
-          <div className="nut-popover-content-group" ref={popoverContentRef}>
+          <View className="nut-popover-content-group" ref={popoverContentRef}>
             {showArrow && (
-              <div className={popoverArrow()} style={popoverArrowStyle()} />
+              <View className={popoverArrow()} style={popoverArrowStyle()} />
             )}
             {Array.isArray(children) ? children[1] : ''}
             {list.map((item, index) => {
               return (
-                <div
+                <View
                   className={classNames(
                     {
                       'nut-popover-menu-item': true,
@@ -328,32 +329,34 @@ export const Popover: FunctionComponent<
                   onClick={() => handleSelect(item, index)}
                 >
                   {item.icon ? (
-                    <div className="nut-popover-menu-item-icon">
+                    <View className="nut-popover-menu-item-icon">
                       {item.icon}
-                    </div>
+                    </View>
                   ) : null}
-                  <div className="nut-popover-menu-item-name">{item.name}</div>
+                  <View className="nut-popover-menu-item-name">
+                    {item.name}
+                  </View>
                   {item.action && item.action.icon ? (
-                    <div
+                    <View
                       className="nut-popover-menu-item-action-icon"
                       onClick={(e) => item.action?.onClick?.(e)}
                     >
                       {item.action.icon}
-                    </div>
+                    </View>
                   ) : null}
-                </div>
+                </View>
               )
             })}
-          </div>
+          </View>
         </Popup>
         {showPopup && closeOnOutsideClick && (
-          <div
+          <View
             className="nut-popover-content-bg"
             onClick={clickAway}
             onTouchMove={clickAway}
           />
         )}
-      </div>
+      </View>
     </>
   )
 }
diff --git a/src/packages/shortpassword/demo.taro.tsx b/src/packages/shortpassword/demo.taro.tsx
index cf8937ce31..3a7fc15acf 100644
--- a/src/packages/shortpassword/demo.taro.tsx
+++ b/src/packages/shortpassword/demo.taro.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
-
+import { ScrollView, View } from '@tarojs/components'
 import Header from '@/sites/components/header'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Demo1 from './demos/taro/demo1'
@@ -40,20 +40,20 @@ const ShortPasswordDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2>{translated.displayPlain}</h2>
+        <View className="h2">{translated.displayPlain}</View>
         <Demo2 />
-        <h2>{translated.displayButton}</h2>
+        <View className="h2">{translated.displayButton}</View>
         <Demo3 />
-        <h2>{translated.customLength}</h2>
+        <View className="h2">{translated.customLength}</View>
         <Demo4 />
-        <h2>{translated.forgetPassword}</h2>
+        <View className="h2">{translated.forgetPassword}</View>
         <Demo5 />
-        <h2>{translated.autoFocus}</h2>
+        <View className="h2">{translated.autoFocus}</View>
         <Demo6 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/shortpassword/shortpassword.taro.tsx b/src/packages/shortpassword/shortpassword.taro.tsx
index bb6d39f955..fd77534374 100644
--- a/src/packages/shortpassword/shortpassword.taro.tsx
+++ b/src/packages/shortpassword/shortpassword.taro.tsx
@@ -7,6 +7,7 @@ import React, {
 } from 'react'
 import { Tips } from '@nutui/icons-react-taro'
 import classNames from 'classnames'
+import { View } from '@tarojs/components'
 import Popup from '@/packages/popup/index.taro'
 import { useConfig } from '@/packages/configprovider/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
@@ -133,55 +134,55 @@ export const InternalShortPassword: ForwardRefRenderFunction<
       onCloseIconClick={onClose}
       {...rest}
     >
-      <div className={classNames(classPrefix, className)} style={style}>
-        <div className={`${classPrefix}-title`}>
+      <View className={classNames(classPrefix, className)} style={style}>
+        <View className={`${classPrefix}-title`}>
           {title || locale.shortpassword.title}
-        </div>
-        <div className={`${classPrefix}-description`}>
+        </View>
+        <View className={`${classPrefix}-description`}>
           {description || locale.shortpassword.description}
-        </div>
-        <div className={`${classPrefix}-input`} onClick={onFocus}>
-          <div className={`${classPrefix}-input-site`} />
-          <div className={`${classPrefix}-input-fake`}>
+        </View>
+        <View className={`${classPrefix}-input`} onClick={onFocus}>
+          <View className={`${classPrefix}-input-site`} />
+          <View className={`${classPrefix}-input-fake`}>
             {[...new Array(comLen).keys()].map((item, index) => {
               return (
-                <div className={`${classPrefix}-input-fake-li`} key={index}>
+                <View className={`${classPrefix}-input-fake-li`} key={index}>
                   {inputValue.length > index && (
                     <>
                       {plain ? (
                         inputValue[index]
                       ) : (
-                        <div className={`${classPrefix}-input-fake-li-icon`} />
+                        <View className={`${classPrefix}-input-fake-li-icon`} />
                       )}
                     </>
                   )}
-                </div>
+                </View>
               )
             })}
-          </div>
-        </div>
-        <div className={`${classPrefix}-message`}>
-          <div className={`${classPrefix}-message-error`}>{error}</div>
-          <div className={`${classPrefix}-message-forget`} onClick={onTips}>
+          </View>
+        </View>
+        <View className={`${classPrefix}-message`}>
+          <View className={`${classPrefix}-message-error`}>{error}</View>
+          <View className={`${classPrefix}-message-forget`} onClick={onTips}>
             {tips || (
               <>
                 <Tips size={11} />
                 {locale.shortpassword.tips}
               </>
             )}
-          </div>
-        </div>
+          </View>
+        </View>
         {!hideFooter && (
-          <div className={`${classPrefix}-footer`}>
-            <div className={`${classPrefix}-footer-cancel`} onClick={onCancel}>
+          <View className={`${classPrefix}-footer`}>
+            <View className={`${classPrefix}-footer-cancel`} onClick={onCancel}>
               {locale.cancel}
-            </div>
-            <div className={`${classPrefix}-footer-sure`} onClick={sure}>
+            </View>
+            <View className={`${classPrefix}-footer-sure`} onClick={sure}>
               {locale.confirm}
-            </div>
-          </div>
+            </View>
+          </View>
         )}
-      </div>
+      </View>
     </Popup>
   )
 }
diff --git a/src/packages/sidenavbar/demo.taro.tsx b/src/packages/sidenavbar/demo.taro.tsx
index 957fa2afef..ed46b557a2 100644
--- a/src/packages/sidenavbar/demo.taro.tsx
+++ b/src/packages/sidenavbar/demo.taro.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -30,12 +31,12 @@ const SideNavBarDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{text1}</h2>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{text1}</View>
         <Demo1 />
-        <h2>{text2}</h2>
+        <View className="h2">{text2}</View>
         <Demo2 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/sidenavbar/sidenavbar.taro.tsx b/src/packages/sidenavbar/sidenavbar.taro.tsx
index 12edd53784..c2c89928bb 100644
--- a/src/packages/sidenavbar/sidenavbar.taro.tsx
+++ b/src/packages/sidenavbar/sidenavbar.taro.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, useState, ReactNode } from 'react'
 import classNames from 'classnames'
+import { View } from '@tarojs/components'
 import Popup from '@/packages/popup/index.taro'
 import { OffsetContext } from './context'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -51,14 +52,14 @@ export const SideNavBar: FunctionComponent<Partial<SideNavBarProps>> = (
       onClose={onClose}
     >
       <div className={classNames(classPrefix, className)} {...rest}>
-        <div className={`${classPrefix}-content`}>
-          <div
+        <View className={`${classPrefix}-content`}>
+          <View
             className={`${classPrefix}-list ${
               sidenavbarShow ? 'sidenavbar-show' : 'sidenavbar-hide'
             }`}
             onClick={handleClick}
           >
-            <div
+            <View
               className={`${classPrefix}-title ${classPrefix}-border-bt`}
               style={{ paddingLeft: `${innerIndent}px` }}
             >
@@ -68,12 +69,12 @@ export const SideNavBar: FunctionComponent<Partial<SideNavBarProps>> = (
                   sidenavbarShow ? 'arrow-up' : 'arrow-down'
                 }`}
               />
-            </div>
+            </View>
             <OffsetContext.Provider value={innerIndent}>
-              <div className={`${classPrefix}-content`}>{children}</div>
+              <View className={`${classPrefix}-content`}>{children}</View>
             </OffsetContext.Provider>
-          </div>
-        </div>
+          </View>
+        </View>
       </div>
     </Popup>
   )
diff --git a/src/packages/signature/demo.taro.tsx b/src/packages/signature/demo.taro.tsx
index 65077cebad..4d87c33184 100644
--- a/src/packages/signature/demo.taro.tsx
+++ b/src/packages/signature/demo.taro.tsx
@@ -1,6 +1,7 @@
 import './demo.scss'
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -25,16 +26,16 @@ const SignatureDemo = () => {
   return (
     <>
       <Header />
-      <div
+      <ScrollView
         className={`demo demo-signature demo-taro-signature ${
           Taro.getEnv() === 'WEB' ? 'web' : ''
         }`}
       >
-        <h2>{translated.basic}</h2>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2> {translated.title}</h2>
+        <View className="h2"> {translated.title}</View>
         <Demo2 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/signature/demos/taro/demo1.tsx b/src/packages/signature/demos/taro/demo1.tsx
index 371f08cb23..857608f737 100644
--- a/src/packages/signature/demos/taro/demo1.tsx
+++ b/src/packages/signature/demos/taro/demo1.tsx
@@ -1,5 +1,6 @@
 import React, { useRef } from 'react'
 import { Signature, Button } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo1 = () => {
   const confirm = (dataurl: string, isSigned?: boolean) => {
@@ -16,7 +17,7 @@ const Demo1 = () => {
   return (
     <>
       <Signature onConfirm={confirm} onClear={clear} ref={signatureRef} />
-      <div className="demo-btn">
+      <View className="demo-btn">
         <Button
           type="default"
           size="small"
@@ -36,7 +37,7 @@ const Demo1 = () => {
         >
           确认
         </Button>
-      </div>
+      </View>
       <p className="demo-tips demo1">Tips: 点击确认按钮,下方显示签名图片</p>
     </>
   )
diff --git a/src/packages/signature/demos/taro/demo2.tsx b/src/packages/signature/demos/taro/demo2.tsx
index fbaaebf8cd..500559e638 100644
--- a/src/packages/signature/demos/taro/demo2.tsx
+++ b/src/packages/signature/demos/taro/demo2.tsx
@@ -1,5 +1,6 @@
 import React, { useRef } from 'react'
 import { Signature, Button } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo2 = () => {
   const confirm = (dataurl: string) => {
@@ -19,7 +20,7 @@ const Demo2 = () => {
         canvasId="testCanvas"
         ref={signatureRef1}
       />
-      <div className="demo-btn">
+      <View className="demo-btn">
         <Button
           size="small"
           style={{ margin: 8 }}
@@ -38,7 +39,7 @@ const Demo2 = () => {
         >
           确认
         </Button>
-      </div>
+      </View>
       <p className="demo-tips demo2">Tips: 点击确认按钮,下方显示签名图片</p>
     </>
   )
diff --git a/src/packages/signature/signature.taro.tsx b/src/packages/signature/signature.taro.tsx
index e131733bab..2b4cde1761 100644
--- a/src/packages/signature/signature.taro.tsx
+++ b/src/packages/signature/signature.taro.tsx
@@ -13,6 +13,7 @@ import {
   canvasToTempFilePath,
   CanvasContext,
 } from '@tarojs/taro'
+import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
 export type SignatureType = 'jpg' | 'png'
@@ -193,8 +194,8 @@ const InternalSignature: ForwardRefRenderFunction<
   }, [])
 
   return (
-    <div className={`${classPrefix} ${className}`} {...rest}>
-      <div className={`${classPrefix}-inner spcanvas_WEAPP`} ref={wrapRef}>
+    <View className={`${classPrefix} ${className}`} {...rest}>
+      <View className={`${classPrefix}-inner spcanvas_WEAPP`} ref={wrapRef}>
         {getEnv() === 'WEAPP' || getEnv() === 'JD' ? (
           <canvas
             id={canvasId}
@@ -220,8 +221,8 @@ const InternalSignature: ForwardRefRenderFunction<
             onTouchCancel={endEventHandler}
           />
         )}
-      </div>
-    </div>
+      </View>
+    </View>
   )
 }
 
diff --git a/src/packages/sticky/sticky.taro.tsx b/src/packages/sticky/sticky.taro.tsx
index d0a627aca4..46f53b757c 100644
--- a/src/packages/sticky/sticky.taro.tsx
+++ b/src/packages/sticky/sticky.taro.tsx
@@ -14,6 +14,7 @@ import {
   getSystemInfoSync,
   getEnv,
 } from '@tarojs/taro'
+import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import useWatch from '@/utils/use-watch'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
@@ -152,7 +153,7 @@ export const Sticky: FunctionComponent<Partial<StickyProps>> = (props) => {
       className={classNames(classPrefix, className)}
       {...rest}
     >
-      <div
+      <View
         className={classNames('nut-sticky-box', {
           'nut-sticky-fixed': fixed,
         })}
@@ -160,7 +161,7 @@ export const Sticky: FunctionComponent<Partial<StickyProps>> = (props) => {
         style={stickyStyle}
       >
         {children}
-      </div>
+      </View>
     </div>
   )
 }
diff --git a/src/packages/subsidenavbar/subsidenavbar.taro.tsx b/src/packages/subsidenavbar/subsidenavbar.taro.tsx
index 5b2e40409b..6597cbcd22 100644
--- a/src/packages/subsidenavbar/subsidenavbar.taro.tsx
+++ b/src/packages/subsidenavbar/subsidenavbar.taro.tsx
@@ -7,6 +7,7 @@ import React, {
   useContext,
   useState,
 } from 'react'
+import { View } from '@tarojs/components'
 import { OffsetContext } from '../sidenavbar/context'
 
 export type SubSideNavBarProps = {
@@ -89,10 +90,10 @@ export const SubSideNavBar: FunctionComponent<SubSideNavBarProps> = (props) => {
 
   return (
     <div className={divClass} ref={listRef} onClick={clickFn} {...rest}>
-      <div className={`${classPrefix}-title ${classPrefix}-border-bt`}>
+      <View className={`${classPrefix}-title ${classPrefix}-border-bt`}>
         {title} <i className={iconClass} />
-      </div>
-      <div className={`${classPrefix}-content`}>{children}</div>
+      </View>
+      <View className={`${classPrefix}-content`}>{children}</View>
     </div>
   )
 }
diff --git a/src/packages/tabbar/tabbar.taro.tsx b/src/packages/tabbar/tabbar.taro.tsx
index 0fd5978f3e..bb9a938eb2 100644
--- a/src/packages/tabbar/tabbar.taro.tsx
+++ b/src/packages/tabbar/tabbar.taro.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react'
 import classNames from 'classnames'
+import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/utils/use-props-value'
 import TabbarItem from '../tabbaritem/index.taro'
@@ -53,7 +54,7 @@ export const Tabbar: FunctionComponent<Partial<TabbarProps>> & {
   })
 
   return (
-    <div
+    <View
       className={classNames(
         classPrefix,
         {
@@ -63,7 +64,7 @@ export const Tabbar: FunctionComponent<Partial<TabbarProps>> & {
       )}
       style={style}
     >
-      <div className={`${classPrefix}-wrap`}>
+      <View className={`${classPrefix}-wrap`}>
         <TabbarContext.Provider
           value={{
             selectIndex,
@@ -77,9 +78,9 @@ export const Tabbar: FunctionComponent<Partial<TabbarProps>> & {
             return React.cloneElement(child, { ...child.props, index })
           })}
         </TabbarContext.Provider>
-      </div>
-      {(fixed || safeArea) && <div className={`${classPrefix}-safe-area`} />}
-    </div>
+      </View>
+      {(fixed || safeArea) && <View className={`${classPrefix}-safe-area`} />}
+    </View>
   )
 }
 
diff --git a/src/packages/tabbaritem/tabbaritem.taro.tsx b/src/packages/tabbaritem/tabbaritem.taro.tsx
index 4d6fdbfc0b..b6882312ee 100644
--- a/src/packages/tabbaritem/tabbaritem.taro.tsx
+++ b/src/packages/tabbaritem/tabbaritem.taro.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, ReactNode, useContext } from 'react'
 import classNames from 'classnames'
+import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import Badge from '@/packages/badge/index.taro'
 import TabbarContext from '@/packages/tabbar/context'
@@ -70,7 +71,7 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
   }
 
   return (
-    <div
+    <View
       className={tabbarItemClass}
       style={{
         color: active ? ctx?.activeColor : ctx?.inactiveColor,
@@ -82,15 +83,15 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
       {icon ? (
         <>
           <Badge {...badgeProps}>
-            <div className={boxPrefix}>{icon}</div>
+            <View className={boxPrefix}>{icon}</View>
           </Badge>
-          <div className={titleClass}>{title}</div>
+          <View className={titleClass}>{title}</View>
         </>
       ) : (
         <Badge {...badgeProps}>
-          <div className={titleClass}>{title}</div>
+          <View className={titleClass}>{title}</View>
         </Badge>
       )}
-    </div>
+    </View>
   )
 }
diff --git a/src/packages/table/demo.taro.tsx b/src/packages/table/demo.taro.tsx
index 976466e994..06c4f5c2d9 100644
--- a/src/packages/table/demo.taro.tsx
+++ b/src/packages/table/demo.taro.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import Taro from '@tarojs/taro'
 import { Toast } from '@nutui/nutui-react-taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -62,7 +63,7 @@ const TableDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <Toast
           type="text"
           visible={show}
@@ -71,35 +72,35 @@ const TableDemo = () => {
             setShow(false)
           }}
         />
-        <h2>{translated.basic}</h2>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2>{translated.borderedAndAlign}</h2>
+        <View className="h2">{translated.borderedAndAlign}</View>
         <Demo2 />
-        <h2>{translated.summaryTitle}</h2>
+        <View className="h2">{translated.summaryTitle}</View>
         <Demo3 />
-        <h2>{translated.striped}</h2>
+        <View className="h2">{translated.striped}</View>
         <Demo4 />
-        <h2>{translated.hideHeader}</h2>
+        <View className="h2">{translated.hideHeader}</View>
         <Demo5 />
-        <h2>{translated.noDataTitle}</h2>
+        <View className="h2">{translated.noDataTitle}</View>
         <Demo6 />
-        <h2>{translated.customCell}</h2>
+        <View className="h2">{translated.customCell}</View>
         <Demo7 />
-        <h2>{translated.asynchronousRendering}</h2>
+        <View className="h2">{translated.asynchronousRendering}</View>
         <Demo8 />
-        <h2>{translated.sorting}</h2>
+        <View className="h2">{translated.sorting}</View>
         <Demo9 />
-        <h2>{translated.sorterIcon}</h2>
+        <View className="h2">{translated.sorterIcon}</View>
         <Demo10 />
-        <h2>{translated.stickyHeader}</h2>
+        <View className="h2">{translated.stickyHeader}</View>
         <Demo11 />
-        <h2>{translated.stickyLeftColumn}</h2>
+        <View className="h2">{translated.stickyLeftColumn}</View>
         <Demo12 />
-        <h2>{translated.stickyRightColumn}</h2>
+        <View className="h2">{translated.stickyRightColumn}</View>
         <Demo13 />
-        <h2>{translated.customRow}</h2>
+        <View className="h2">{translated.customRow}</View>
         <Demo14 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/table/table.taro.tsx b/src/packages/table/table.taro.tsx
index 27cd843289..182de2ece7 100644
--- a/src/packages/table/table.taro.tsx
+++ b/src/packages/table/table.taro.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent, useEffect, useRef } from 'react'
 import classNames from 'classnames'
 import { ArrowDown } from '@nutui/icons-react-taro'
+import { View } from '@tarojs/components'
 import { BasicTableProps, TableColumnProps } from './types'
 import {
   useConfig,
@@ -100,7 +101,7 @@ export const Table: FunctionComponent<
   const renderHeadCells = () => {
     return columns.map((item, index) => {
       return (
-        <div
+        <View
           className={classNames(
             `${headerClassPrefix}-th`,
             cellClasses(item),
@@ -113,7 +114,7 @@ export const Table: FunctionComponent<
           {item.title}&nbsp;
           {item.sorter &&
             (sorterIcon || <ArrowDown width="12px" height="12px" />)}
-        </div>
+        </View>
       )
     })
   }
@@ -131,7 +132,7 @@ export const Table: FunctionComponent<
     }
     return sortDataItem().map(([value, render]) => {
       return (
-        <div
+        <View
           className={classNames(
             `${bodyClassPrefix}-td`,
             cellClasses(getColumnItem(value)),
@@ -141,11 +142,11 @@ export const Table: FunctionComponent<
           style={getStickyStyle(value)}
         >
           {typeof item[value] === 'function' || typeof render === 'function' ? (
-            <div>{render ? render(item, rowIndex) : item[value](item)}</div>
+            <View>{render ? render(item, rowIndex) : item[value](item)}</View>
           ) : (
             item[value]
           )}
-        </div>
+        </View>
       )
     })
   }
@@ -153,16 +154,16 @@ export const Table: FunctionComponent<
   const renderBodyTrs = () => {
     return innerValue.map((item, index) => {
       return (
-        <div className={bodyClassPrefix} key={index}>
+        <View className={bodyClassPrefix} key={index}>
           {renderBodyTds(item, index)}
-        </div>
+        </View>
       )
     })
   }
 
   return (
     <div className={cls} {...rest}>
-      <div
+      <View
         className={classNames(
           `${classPrefix}-wrapper ${
             isSticky ? `${classPrefix}-wrapper-sticky` : ''
@@ -170,33 +171,33 @@ export const Table: FunctionComponent<
         )}
         style={style}
       >
-        <div
+        <View
           className={classNames(`${classPrefix}-main`, {
             [`${classPrefix}-main-striped`]: striped,
           })}
         >
           {showHeader && (
-            <div className={`${classPrefix}-main-head`}>
-              <div className={headerClassPrefix}>{renderHeadCells()}</div>
-            </div>
+            <View className={`${classPrefix}-main-head`}>
+              <View className={headerClassPrefix}>{renderHeadCells()}</View>
+            </View>
           )}
-          <div className={`${classPrefix}-main-body`}>{renderBodyTrs()}</div>
-        </div>
-      </div>
+          <View className={`${classPrefix}-main-body`}>{renderBodyTrs()}</View>
+        </View>
+      </View>
       {isSticky ? (
         <>
-          <div
+          <View
             className={`${classPrefix}-sticky-left`}
             style={{ width: stickyLeftWidth }}
           />
-          <div
+          <View
             className={`${classPrefix}-sticky-right`}
             style={{ width: stickyRightWidth }}
           />
         </>
       ) : null}
       {(summary || innerValue.length === 0) && (
-        <div className={`${classPrefix}-summary`}>{summary || noData}</div>
+        <View className={`${classPrefix}-summary`}>{summary || noData}</View>
       )}
     </div>
   )
diff --git a/src/packages/tabpane/tabpane.taro.tsx b/src/packages/tabpane/tabpane.taro.tsx
index 45c000ae0f..8ed23089a7 100644
--- a/src/packages/tabpane/tabpane.taro.tsx
+++ b/src/packages/tabpane/tabpane.taro.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react'
 import classNames from 'classnames'
+import { View } from '@tarojs/components'
 
 interface TabPanelInnerProps {
   autoHeightClassName: string
@@ -38,6 +39,6 @@ export const TabPane: FunctionComponent<
   )
 
   return children ? (
-    <div className={classes}>{!disabled && children}</div>
+    <View className={classes}>{!disabled && children}</View>
   ) : null
 }
diff --git a/src/packages/tabs/demos/taro/demo1.tsx b/src/packages/tabs/demos/taro/demo1.tsx
index 2835e60e88..f28e4b1c88 100644
--- a/src/packages/tabs/demos/taro/demo1.tsx
+++ b/src/packages/tabs/demos/taro/demo1.tsx
@@ -4,18 +4,16 @@ import { Tabs } from '@nutui/nutui-react-taro'
 const Demo1 = () => {
   const [tab1value, setTab1value] = useState<string | number>('0')
   return (
-    <>
-      <Tabs
-        value={tab1value}
-        onChange={(value) => {
-          setTab1value(value)
-        }}
-      >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
-      </Tabs>
-    </>
+    <Tabs
+      value={tab1value}
+      onChange={(value) => {
+        setTab1value(value)
+      }}
+    >
+      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
+    </Tabs>
   )
 }
 export default Demo1
diff --git a/src/packages/tabs/demos/taro/demo2.tsx b/src/packages/tabs/demos/taro/demo2.tsx
index 401008f4e4..51ed281ab1 100644
--- a/src/packages/tabs/demos/taro/demo2.tsx
+++ b/src/packages/tabs/demos/taro/demo2.tsx
@@ -4,19 +4,17 @@ import { Tabs } from '@nutui/nutui-react-taro'
 const Demo2 = () => {
   const [tab1value, setTab1value] = useState<string | number>('0')
   return (
-    <>
-      <Tabs
-        value={tab1value}
-        onChange={(value) => {
-          setTab1value(value)
-        }}
-        activeType="smile"
-      >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
-      </Tabs>
-    </>
+    <Tabs
+      value={tab1value}
+      onChange={(value) => {
+        setTab1value(value)
+      }}
+      activeType="smile"
+    >
+      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
+    </Tabs>
   )
 }
 export default Demo2
diff --git a/src/packages/tabs/demos/taro/demo3.tsx b/src/packages/tabs/demos/taro/demo3.tsx
index 5f3e6ce2e9..ef31fa2c7d 100644
--- a/src/packages/tabs/demos/taro/demo3.tsx
+++ b/src/packages/tabs/demos/taro/demo3.tsx
@@ -4,19 +4,17 @@ import { Tabs } from '@nutui/nutui-react-taro'
 const Demo3 = () => {
   const [tab1value, setTab1value] = useState<string | number>('0')
   return (
-    <>
-      <Tabs
-        value={tab1value}
-        onChange={(value) => {
-          setTab1value(value)
-        }}
-        activeType="simple"
-      >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
-      </Tabs>
-    </>
+    <Tabs
+      value={tab1value}
+      onChange={(value) => {
+        setTab1value(value)
+      }}
+      activeType="simple"
+    >
+      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
+    </Tabs>
   )
 }
 export default Demo3
diff --git a/src/packages/tabs/demos/taro/demo4.tsx b/src/packages/tabs/demos/taro/demo4.tsx
index e6396ad698..e52b95d172 100644
--- a/src/packages/tabs/demos/taro/demo4.tsx
+++ b/src/packages/tabs/demos/taro/demo4.tsx
@@ -4,19 +4,17 @@ import { Tabs } from '@nutui/nutui-react-taro'
 const Demo4 = () => {
   const [tab1value, setTab1value] = useState<string | number>('0')
   return (
-    <>
-      <Tabs
-        value={tab1value}
-        onChange={(value) => {
-          setTab1value(value)
-        }}
-        activeType="card"
-      >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
-      </Tabs>
-    </>
+    <Tabs
+      value={tab1value}
+      onChange={(value) => {
+        setTab1value(value)
+      }}
+      activeType="card"
+    >
+      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
+    </Tabs>
   )
 }
 export default Demo4
diff --git a/src/packages/tabs/demos/taro/demo5.tsx b/src/packages/tabs/demos/taro/demo5.tsx
index dacdb8b418..9d220b42ad 100644
--- a/src/packages/tabs/demos/taro/demo5.tsx
+++ b/src/packages/tabs/demos/taro/demo5.tsx
@@ -4,19 +4,17 @@ import { Tabs } from '@nutui/nutui-react-taro'
 const Demo5 = () => {
   const [tab1value, setTab1value] = useState<string | number>('0')
   return (
-    <>
-      <Tabs
-        value={tab1value}
-        onChange={(value) => {
-          setTab1value(value)
-        }}
-        activeType="button"
-      >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
-      </Tabs>
-    </>
+    <Tabs
+      value={tab1value}
+      onChange={(value) => {
+        setTab1value(value)
+      }}
+      activeType="button"
+    >
+      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
+    </Tabs>
   )
 }
 export default Demo5
diff --git a/src/packages/tabs/demos/taro/demo6.tsx b/src/packages/tabs/demos/taro/demo6.tsx
index cd26844a65..fac49ec462 100644
--- a/src/packages/tabs/demos/taro/demo6.tsx
+++ b/src/packages/tabs/demos/taro/demo6.tsx
@@ -4,19 +4,17 @@ import { Tabs } from '@nutui/nutui-react-taro'
 const Demo6 = () => {
   const [tab1value, setTab1value] = useState<string | number>('0')
   return (
-    <>
-      <Tabs
-        value={tab1value}
-        onChange={(value) => {
-          setTab1value(value)
-        }}
-        activeType="divider"
-      >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
-      </Tabs>
-    </>
+    <Tabs
+      value={tab1value}
+      onChange={(value) => {
+        setTab1value(value)
+      }}
+      activeType="divider"
+    >
+      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
+    </Tabs>
   )
 }
 export default Demo6
diff --git a/src/packages/tabs/demos/taro/demo7.tsx b/src/packages/tabs/demos/taro/demo7.tsx
index 2d08cbd704..259657d358 100644
--- a/src/packages/tabs/demos/taro/demo7.tsx
+++ b/src/packages/tabs/demos/taro/demo7.tsx
@@ -4,19 +4,17 @@ import { Tabs } from '@nutui/nutui-react-taro'
 const Demo7 = () => {
   const [tab1value, setTab1value] = useState<string | number>('0')
   return (
-    <>
-      <Tabs
-        value={tab1value}
-        onChange={(value) => {
-          setTab1value(value)
-        }}
-        align="left"
-      >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
-      </Tabs>
-    </>
+    <Tabs
+      value={tab1value}
+      onChange={(value) => {
+        setTab1value(value)
+      }}
+      align="left"
+    >
+      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
+    </Tabs>
   )
 }
 export default Demo7
diff --git a/src/packages/tabs/demos/taro/demo8.tsx b/src/packages/tabs/demos/taro/demo8.tsx
index 686413269b..49e3588b72 100644
--- a/src/packages/tabs/demos/taro/demo8.tsx
+++ b/src/packages/tabs/demos/taro/demo8.tsx
@@ -4,20 +4,18 @@ import { Tabs } from '@nutui/nutui-react-taro'
 const Demo8 = () => {
   const [tab1value, setTab1value] = useState<string | number>('0')
   return (
-    <>
-      <Tabs
-        value={tab1value}
-        activeType="card"
-        onChange={(value) => {
-          setTab1value(value)
-        }}
-        align="left"
-      >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
-        <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
-      </Tabs>
-    </>
+    <Tabs
+      value={tab1value}
+      activeType="card"
+      onChange={(value) => {
+        setTab1value(value)
+      }}
+      align="left"
+    >
+      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
+    </Tabs>
   )
 }
 export default Demo8
diff --git a/src/packages/timedetail/timedetail.taro.tsx b/src/packages/timedetail/timedetail.taro.tsx
index af8be2f105..afec88e42c 100644
--- a/src/packages/timedetail/timedetail.taro.tsx
+++ b/src/packages/timedetail/timedetail.taro.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, useCallback, useMemo } from 'react'
 import classNames from 'classnames'
+import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import {
   TimeType,
@@ -60,9 +61,9 @@ export const TimeDetail: FunctionComponent<
     [activeTime, optionKey, activeDate]
   )
   return (
-    <div className={classNames(classPrefix, className)}>
+    <View className={classNames(classPrefix, className)}>
       {timeList[optionKey.childrenKey].map((item: TimeType) => (
-        <span
+        <View
           className={classNames(`${classPrefix}-item`, {
             active: isActive(item[optionKey.valueKey]),
           })}
@@ -70,9 +71,9 @@ export const TimeDetail: FunctionComponent<
           onClick={() => onSelect(item)}
         >
           {item[optionKey.textKey]}
-        </span>
+        </View>
       ))}
-    </div>
+    </View>
   )
 }
 
diff --git a/src/packages/timeselect/demo.taro.tsx b/src/packages/timeselect/demo.taro.tsx
index c82b4bb155..309e5bcaee 100644
--- a/src/packages/timeselect/demo.taro.tsx
+++ b/src/packages/timeselect/demo.taro.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -32,16 +33,16 @@ const TimeSelectDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2>{translated.optionKey}</h2>
+        <View className="h2">{translated.optionKey}</View>
         <Demo2 />
-        <h2>{translated.multiple}</h2>
+        <View className="h2">{translated.multiple}</View>
         <Demo3 />
-        <h2>{translated.custom}</h2>
+        <View className="h2">{translated.custom}</View>
         <Demo4 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/timeselect/timeselect.taro.tsx b/src/packages/timeselect/timeselect.taro.tsx
index f3bfe88d37..25724c3964 100644
--- a/src/packages/timeselect/timeselect.taro.tsx
+++ b/src/packages/timeselect/timeselect.taro.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, ReactNode, useState } from 'react'
 import classNames from 'classnames'
+import { View } from '@tarojs/components'
 import Popup from '@/packages/popup/index.taro'
 import TimeDetail from '@/packages/timedetail/index.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -152,11 +153,11 @@ export const TimeSelect: FunctionComponent<Partial<TimeSelectProps>> = (
       onClose={closeFun}
       {...rest}
     >
-      <div className={classNames(classPrefix, className)}>
-        <div className={`${classPrefix}-content`}>
-          <div className={`${classPrefix}-content-left`}>
+      <View className={classNames(classPrefix, className)}>
+        <View className={`${classPrefix}-content`}>
+          <View className={`${classPrefix}-content-left`}>
             {options.map((item: DateType) => (
-              <div
+              <View
                 key={item[optionKey.valueKey]}
                 className={classNames('nut-timepannel', {
                   active: item[optionKey.valueKey] === activeDate,
@@ -164,9 +165,9 @@ export const TimeSelect: FunctionComponent<Partial<TimeSelectProps>> = (
                 onClick={() => handleChange(item)}
               >
                 {item[optionKey.textKey]}
-              </div>
+              </View>
             ))}
-          </div>
+          </View>
           <TimeDetail
             options={options}
             optionKey={optionKey}
@@ -174,8 +175,8 @@ export const TimeSelect: FunctionComponent<Partial<TimeSelectProps>> = (
             activeTime={activeTime}
             onSelect={handleSelectTime}
           />
-        </div>
-      </div>
+        </View>
+      </View>
     </Popup>
   )
 }
diff --git a/src/packages/toast/demo.taro.tsx b/src/packages/toast/demo.taro.tsx
index 2536a579cb..d037fe8650 100644
--- a/src/packages/toast/demo.taro.tsx
+++ b/src/packages/toast/demo.taro.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Toast } from '@nutui/nutui-react-taro'
+import { ScrollView, View } from '@tarojs/components'
 import Header from '@/sites/components/header'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Demo1 from './demos/taro/demo1'
@@ -44,20 +45,19 @@ const ToastDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${demoClass()}`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView className={`demo ${demoClass()}`}>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2>{translated.toastFunction}</h2>
+        <View className="h2">{translated.toastFunction}</View>
         <Toast id="test" />
         <Demo2 />
-
-        <h2>{translated.toastDuration}</h2>
+        <View className="h2">{translated.toastDuration}</View>
         <Demo3 />
-        <h2>{translated.toastCustomIcon}</h2>
+        <View className="h2">{translated.toastCustomIcon}</View>
         <Demo4 />
-        <h2>{translated.toastWordBreak}</h2>
+        <View className="h2">{translated.toastWordBreak}</View>
         <Demo5 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/uploader/preview.taro.tsx b/src/packages/uploader/preview.taro.tsx
index 1e79b66be9..6f9a39f7f5 100644
--- a/src/packages/uploader/preview.taro.tsx
+++ b/src/packages/uploader/preview.taro.tsx
@@ -5,7 +5,7 @@ import {
   Link as LinkIcon,
   Loading,
 } from '@nutui/icons-react-taro'
-import { Image } from '@tarojs/components'
+import { Image, View } from '@tarojs/components'
 import Progress from '@/packages/progress/index.taro'
 import { FileItem } from '@/packages/uploader/file-item.taro'
 import { ERROR } from '@/packages/uploader/utils'
@@ -32,7 +32,7 @@ export const Preview: React.FunctionComponent<any> = ({
       {fileList.length !== 0 &&
         fileList.map((item: any, index: number) => {
           return (
-            <div
+            <View
               className={`nut-uploader-preview ${previewType}`}
               key={item.uid}
             >
@@ -44,21 +44,21 @@ export const Preview: React.FunctionComponent<any> = ({
                 />
               )}
               {previewType === 'picture' && !children && (
-                <div className="nut-uploader-preview-img">
+                <View className="nut-uploader-preview-img">
                   {item.status === 'ready' ? (
-                    <div className="nut-uploader-preview-progress">
-                      <div className="nut-uploader-preview-progress-msg">
+                    <View className="nut-uploader-preview-progress">
+                      <View className="nut-uploader-preview-progress-msg">
                         {item.message}
-                      </div>
-                    </div>
+                      </View>
+                    </View>
                   ) : (
                     item.status !== 'success' && (
-                      <div className="nut-uploader-preview-progress">
+                      <View className="nut-uploader-preview-progress">
                         {renderIcon(item)}
-                        <div className="nut-uploader-preview-progress-msg">
+                        <View className="nut-uploader-preview-progress-msg">
                           {item.message}
-                        </div>
-                      </div>
+                        </View>
+                      </View>
                     )
                   )}
                   {item.type?.includes('image') ? (
@@ -83,33 +83,33 @@ export const Preview: React.FunctionComponent<any> = ({
                           onClick={() => handleItemClick(item, index)}
                         />
                       ) : (
-                        <div className="nut-uploader-preview-img-file">
-                          <div
+                        <View className="nut-uploader-preview-img-file">
+                          <View
                             onClick={() => handleItemClick(item, index)}
                             className="nut-uploader-preview-img-file-name"
                           >
                             <LinkIcon color="#808080" />
                             <span>&nbsp;{item.name}</span>
-                          </div>
-                        </div>
+                          </View>
+                        </View>
                       )}
                     </>
                   )}
                   {item.status === 'success' ? (
-                    <div className="tips">{item.name}</div>
+                    <View className="tips">{item.name}</View>
                   ) : null}
-                </div>
+                </View>
               )}
 
               {previewType === 'list' && (
-                <div className="nut-uploader-preview-list">
-                  <div
+                <View className="nut-uploader-preview-list">
+                  <View
                     className={`nut-uploader-preview-img-file-name ${item.status}`}
                     onClick={() => handleItemClick(item, index)}
                   >
                     <LinkIcon />
                     <span>&nbsp;{item.name}</span>
-                  </div>
+                  </View>
                   {deletable && (
                     <Del
                       color="#808080"
@@ -124,9 +124,9 @@ export const Preview: React.FunctionComponent<any> = ({
                       showText={false}
                     />
                   )}
-                </div>
+                </View>
               )}
-            </div>
+            </View>
           )
         })}
     </>
diff --git a/src/packages/video/demo.taro.tsx b/src/packages/video/demo.taro.tsx
index 3193c3df23..103a083e25 100644
--- a/src/packages/video/demo.taro.tsx
+++ b/src/packages/video/demo.taro.tsx
@@ -49,22 +49,16 @@ const VideoDemo = () => {
       >
         <View className="h2">{translated.basic}</View>
         <Demo1 />
-
         <View className="h2">{translated.autoPlay}</View>
         <Demo2 />
-
         <View className="h2">{translated.muted}</View>
         <Demo3 />
-
         <View className="h2">{translated.cover}</View>
         <Demo4 />
-
         <View className="h2">{translated.inline}</View>
         <Demo5 />
-
         <View className="h2">{translated.background}</View>
         <Demo6 />
-
         <View className="h2">{translated.switch}</View>
         <Demo7 />
       </ScrollView>