From 6e612056ffdfc75756a3ef0a9269773c1aa752b9 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Wed, 9 Aug 2023 15:47:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=86=85=20scroll-view=20=E6=A0=87=E7=AD=BE=E5=9C=A8=20taro-h5?=
 =?UTF-8?q?=20=E7=AB=AF=E7=9A=84=E5=85=BC=E5=AE=B9=E9=97=AE=E9=A2=98=20(#2?=
 =?UTF-8?q?470)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-lock.yaml                                    |  1 +
 src/packages/__VUE/address/index.taro.vue         | 13 ++++++++++---
 src/packages/__VUE/backtop/index.taro.vue         |  8 +++++---
 src/packages/__VUE/calendaritem/index.taro.vue    |  8 ++++++--
 .../__VUE/cascader/cascader-item.taro.vue         |  8 +++++---
 src/packages/__VUE/elevator/index.taro.vue        |  8 ++++++--
 src/packages/__VUE/list/index.taro.vue            |  8 ++++++--
 src/packages/__VUE/menuitem/index.taro.vue        |  8 +++++---
 src/packages/__VUE/scroll-view/index.taro.vue     | 15 +++++++++++++++
 src/packages/__VUE/tabs/index.taro.vue            |  8 +++++---
 vite.config.build.taro.vue.disperse.ts            |  1 +
 vite.config.build.taro.vue.ts                     |  2 ++
 12 files changed, 67 insertions(+), 21 deletions(-)
 create mode 100644 src/packages/__VUE/scroll-view/index.taro.vue

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7bfe92493e..6e5b623997 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14722,6 +14722,7 @@ packages:
 
   /prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+    requiresBuild: true
     dev: true
     optional: true
 
diff --git a/src/packages/__VUE/address/index.taro.vue b/src/packages/__VUE/address/index.taro.vue
index f1d0af0234..c1949e4ed0 100644
--- a/src/packages/__VUE/address/index.taro.vue
+++ b/src/packages/__VUE/address/index.taro.vue
@@ -51,7 +51,12 @@
 
         <view class="nut-address__detail" v-if="privateType == 'custom'">
           <div class="nut-address__detail-list">
-            <scroll-view :scroll-y="true" :style="{ height: '100%' }" :scroll-top="scrollTop" @scroll="scrollChange">
+            <nut-scroll-view
+              :scroll-y="true"
+              :style="{ height: '100%' }"
+              :scroll-top="scrollTop"
+              @scroll="scrollChange"
+            >
               <div
                 v-for="(item, index) in regionList"
                 :key="index"
@@ -64,7 +69,7 @@
                   >{{ item.name }}
                 </div>
               </div>
-            </scroll-view>
+            </nut-scroll-view>
           </div>
         </view>
 
@@ -131,6 +136,7 @@ import Popup from '../popup/index.taro.vue';
 import Elevator from '../elevator/index.taro.vue';
 const { create, componentName, translate } = createComponent('address');
 import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue-taro';
+import ScrollView from '../scroll-view/index.taro.vue';
 
 export default create({
   components: {
@@ -140,7 +146,8 @@ export default create({
     Location2,
     Check,
     Close,
-    Left
+    Left,
+    'nut-scroll-view': ScrollView
   },
   inheritAttrs: false,
   props: {
diff --git a/src/packages/__VUE/backtop/index.taro.vue b/src/packages/__VUE/backtop/index.taro.vue
index 63559fa278..4d429b0924 100644
--- a/src/packages/__VUE/backtop/index.taro.vue
+++ b/src/packages/__VUE/backtop/index.taro.vue
@@ -1,6 +1,6 @@
 <template>
   <view>
-    <scroll-view
+    <nut-scroll-view
       :scroll-y="true"
       :style="{ height }"
       @scroll="scroll"
@@ -8,7 +8,7 @@
       scroll-with-animation="true"
     >
       <slot name="content"></slot>
-    </scroll-view>
+    </nut-scroll-view>
     <view :class="classes" :style="style" @click.stop="click">
       <slot name="icon">
         <Top width="19px" height="19px" class="nut-backtop-main"></Top>
@@ -19,12 +19,14 @@
 
 <script lang="ts">
 import { reactive, computed, toRefs } from 'vue';
+import ScrollView from '../scroll-view/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('backtop');
 import { Top } from '@nutui/icons-vue-taro';
 export default create({
   components: {
-    Top
+    Top,
+    'nut-scroll-view': ScrollView
   },
   props: {
     height: {
diff --git a/src/packages/__VUE/calendaritem/index.taro.vue b/src/packages/__VUE/calendaritem/index.taro.vue
index f5b302cf53..5adecd87c1 100644
--- a/src/packages/__VUE/calendaritem/index.taro.vue
+++ b/src/packages/__VUE/calendaritem/index.taro.vue
@@ -24,7 +24,7 @@
       </view>
     </view>
     <!-- content-->
-    <scroll-view
+    <nut-scroll-view
       :scroll-top="scrollTop"
       :scroll-y="true"
       class="nut-calendar__content"
@@ -72,7 +72,7 @@
           </view>
         </view>
       </view>
-    </scroll-view>
+    </nut-scroll-view>
     <!-- footer-->
     <view class="nut-calendar__footer" v-if="poppable && !isAutoBackFill">
       <view class="nut-calendar__confirm" @click="confirm">{{ confirmText || translate('confirm') }}</view>
@@ -84,6 +84,7 @@ import { reactive, ref, watch, toRefs, computed, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('calendar-item');
 import Taro from '@tarojs/taro';
+import ScrollView from '../scroll-view/index.taro.vue';
 import Utils from '@/packages/utils/date';
 import requestAniFrame from '@/packages/utils/raf';
 import { MonthInfo, Day, CalendarTaroState } from './type';
@@ -98,6 +99,9 @@ interface CalendarDateProp {
 }
 
 export default create({
+  components: {
+    'nut-scroll-view': ScrollView
+  },
   props: {
     type: {
       type: String,
diff --git a/src/packages/__VUE/cascader/cascader-item.taro.vue b/src/packages/__VUE/cascader/cascader-item.taro.vue
index 6a8ad89ba0..62acd4bc12 100644
--- a/src/packages/__VUE/cascader/cascader-item.taro.vue
+++ b/src/packages/__VUE/cascader/cascader-item.taro.vue
@@ -3,7 +3,7 @@
     <template v-if="!initLoading && panes.length">
       <nut-tab-pane v-for="(pane, index) in panes" :title="formatTabTitle(pane)" :key="index">
         <view role="menu" class="nut-cascader-pane">
-          <scroll-view :scrollY="true" style="height: 100%">
+          <nut-scroll-view :scrollY="true" style="height: 100%">
             <template v-for="node in pane.nodes" :key="node.value">
               <view
                 class="nut-cascader-item"
@@ -19,7 +19,7 @@
                 <Checklist v-else class="nut-cascader-item__icon-check" name="checklist" />
               </view>
             </template>
-          </scroll-view>
+          </nut-scroll-view>
         </view>
       </nut-tab-pane>
     </template>
@@ -32,6 +32,7 @@
 </template>
 <script lang="ts">
 import { watch, ref, Ref, computed } from 'vue';
+import ScrollView from '../scroll-view/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('cascader-item');
 import { convertListToOptions } from './helper';
@@ -46,7 +47,8 @@ export default create({
     Loading,
     Checklist,
     [Tabs.name]: Tabs,
-    [TabPane.name]: TabPane
+    [TabPane.name]: TabPane,
+    'nut-scroll-view': ScrollView
   },
   props: {
     visible: Boolean,
diff --git a/src/packages/__VUE/elevator/index.taro.vue b/src/packages/__VUE/elevator/index.taro.vue
index 032c532cc4..dc92cca7ee 100644
--- a/src/packages/__VUE/elevator/index.taro.vue
+++ b/src/packages/__VUE/elevator/index.taro.vue
@@ -1,6 +1,6 @@
 <template>
   <view :class="classes">
-    <scroll-view
+    <nut-scroll-view
       class="nut-elevator__list nut-elevator__list--mini"
       :scroll-top="scrollTop"
       :scroll-y="true"
@@ -35,7 +35,7 @@
           <slot :item="subitem" v-else></slot>
         </view>
       </view>
-    </scroll-view>
+    </nut-scroll-view>
     <view class="nut-elevator__code--current" v-show="scrollStart" v-if="indexList.length > 0">
       {{ indexList[codeIndex][acceptKey] }}
     </view>
@@ -62,8 +62,12 @@ import { ElevatorData } from './type';
 const { componentName, create } = createComponent('elevator');
 
 import Taro from '@tarojs/taro';
+import ScrollView from '../scroll-view/index.taro.vue';
 
 export default create({
+  components: {
+    'nut-scroll-view': ScrollView
+  },
   props: {
     height: {
       type: [Number, String],
diff --git a/src/packages/__VUE/list/index.taro.vue b/src/packages/__VUE/list/index.taro.vue
index efbcec7b69..0243c2cd66 100644
--- a/src/packages/__VUE/list/index.taro.vue
+++ b/src/packages/__VUE/list/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <scroll-view
+  <nut-scroll-view
     :class="classes"
     :scroll-y="true"
     :style="{ height: `${getContainerHeight}px` }"
@@ -29,18 +29,22 @@
         <slot :item="item" :index="index + start"></slot>
       </div>
     </div>
-  </scroll-view>
+  </nut-scroll-view>
 </template>
 <script lang="ts">
 import { reactive, toRefs, computed, ref, Ref, watch, ComputedRef } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Taro from '@tarojs/taro';
+import ScrollView from '../scroll-view/index.taro.vue';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { CachedPosition, CompareResult, binarySearch } from './type';
 const { componentName, create } = createComponent('list');
 const clientHeight = Taro.getSystemInfoSync().windowHeight || 667;
 
 export default create({
+  components: {
+    'nut-scroll-view': ScrollView
+  },
   props: {
     height: {
       type: [Number],
diff --git a/src/packages/__VUE/menuitem/index.taro.vue b/src/packages/__VUE/menuitem/index.taro.vue
index ed32c5f2be..c58f48a64d 100644
--- a/src/packages/__VUE/menuitem/index.taro.vue
+++ b/src/packages/__VUE/menuitem/index.taro.vue
@@ -21,7 +21,7 @@
       @closed="handleClose"
       :close-on-click-overlay="parent.props.closeOnClickOverlay"
     >
-      <scroll-view :scroll-y="true">
+      <nut-scroll-view :scroll-y="true">
         <view class="nut-menu-item__content">
           <view
             v-for="(option, index) in options"
@@ -48,7 +48,7 @@
           </view>
           <slot></slot>
         </view>
-      </scroll-view>
+      </nut-scroll-view>
     </nut-popup>
   </view>
 </template>
@@ -59,6 +59,7 @@ const { create } = createComponent('menu-item');
 import Popup from '../popup/index.taro.vue';
 import { MenuItemOption } from './type';
 import { Check } from '@nutui/icons-vue-taro';
+import ScrollView from '../scroll-view/index.taro.vue';
 
 export default create({
   props: {
@@ -81,7 +82,8 @@ export default create({
   },
   components: {
     Check,
-    [Popup.name]: Popup
+    [Popup.name]: Popup,
+    'nut-scroll-view': ScrollView
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
diff --git a/src/packages/__VUE/scroll-view/index.taro.vue b/src/packages/__VUE/scroll-view/index.taro.vue
new file mode 100644
index 0000000000..796534eb40
--- /dev/null
+++ b/src/packages/__VUE/scroll-view/index.taro.vue
@@ -0,0 +1,15 @@
+<template>
+  <template v-if="Taro.getEnv() === Taro.ENV_TYPE.WEB">
+    <taro-scroll-view-core v-bind="$attrs">
+      <slot></slot>
+    </taro-scroll-view-core>
+  </template>
+  <template v-else>
+    <scroll-view v-bind="$attrs">
+      <slot></slot>
+    </scroll-view>
+  </template>
+</template>
+<script setup lang="ts">
+import Taro from '@tarojs/taro';
+</script>
diff --git a/src/packages/__VUE/tabs/index.taro.vue b/src/packages/__VUE/tabs/index.taro.vue
index 90ae91fb7e..8f095938ec 100644
--- a/src/packages/__VUE/tabs/index.taro.vue
+++ b/src/packages/__VUE/tabs/index.taro.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="nut-tabs" :class="[direction]" ref="container">
-    <scroll-view
+    <nut-scroll-view
       :scroll-x="getScrollX"
       :scroll-y="getScrollY"
       :scroll-with-animation="scrollWithAnimation"
@@ -32,7 +32,7 @@
           <view v-if="canShowLabel" class="nut-tabs__titles-item nut-tabs__titles-placeholder"></view>
         </template>
       </view>
-    </scroll-view>
+    </nut-scroll-view>
     <view
       class="nut-tabs__content"
       ref="tabsContentRef"
@@ -58,6 +58,7 @@ import Taro from '@tarojs/taro';
 import type { RectItem } from './types';
 import { useTabContentTouch } from './hooks';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
+import ScrollView from '../scroll-view/index.taro.vue';
 
 export class Title {
   title = '';
@@ -70,7 +71,8 @@ export type TabsSize = 'large' | 'normal' | 'small';
 const { create } = createComponent('tabs');
 export default create({
   components: {
-    JoySmile
+    JoySmile,
+    'nut-scroll-view': ScrollView
   },
   props: {
     modelValue: {
diff --git a/vite.config.build.taro.vue.disperse.ts b/vite.config.build.taro.vue.disperse.ts
index cc5d643973..320d27b460 100644
--- a/vite.config.build.taro.vue.disperse.ts
+++ b/vite.config.build.taro.vue.disperse.ts
@@ -28,6 +28,7 @@ export default defineConfig({
         compilerOptions: {
           isCustomElement: (tag) => {
             return (
+              tag.startsWith('taro-') ||
               tag.startsWith('scroll-view') ||
               tag.startsWith('swiper') ||
               tag.startsWith('swiper-item') ||
diff --git a/vite.config.build.taro.vue.ts b/vite.config.build.taro.vue.ts
index 378bc690b0..e693558d10 100644
--- a/vite.config.build.taro.vue.ts
+++ b/vite.config.build.taro.vue.ts
@@ -24,6 +24,8 @@ export default defineConfig({
         compilerOptions: {
           isCustomElement: (tag) => {
             return (
+              tag.startsWith('taro-') ||
+              tag.startsWith('scroll-view') ||
               tag.startsWith('swiper') ||
               tag.startsWith('swiper-item') ||
               tag.startsWith('scroll-view') ||