From 149d2164629a1b867af2f690f6447a3e10615711 Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Tue, 13 Sep 2022 19:03:50 +0800
Subject: [PATCH] fix(app-nvue): picker-column set values error

---
 .../src/nvue/picker-view-column/index.tsx     | 119 +++++++++++-------
 .../src/nvue/picker-view/index.tsx            |  11 +-
 2 files changed, 84 insertions(+), 46 deletions(-)

diff --git a/packages/uni-components/src/nvue/picker-view-column/index.tsx b/packages/uni-components/src/nvue/picker-view-column/index.tsx
index 003e2908f..09f943635 100644
--- a/packages/uni-components/src/nvue/picker-view-column/index.tsx
+++ b/packages/uni-components/src/nvue/picker-view-column/index.tsx
@@ -8,6 +8,8 @@ import {
   computed,
   getCurrentInstance,
   onMounted,
+  ExtractPropTypes,
+  WritableComputedRef,
 } from 'vue'
 import { extend, isString } from '@vue/shared'
 import { Props, GetPickerViewColumn } from '../picker-view'
@@ -20,6 +22,7 @@ type ScrollOptions = {
   scrollY: boolean
   scrollTop?: number
 }
+type PickerColumnProps = ExtractPropTypes<typeof props>
 
 const dom = weex.requireModule('dom')
 const isAndroid = weex.config.env.platform.toLowerCase() === 'android'
@@ -27,14 +30,16 @@ function getStyle(val: string) {
   return extend({}, isString(val) ? parseStyleText(val) : val)
 }
 
+const props = {
+  length: {
+    type: [Number, String],
+    default: 0,
+  },
+}
+
 export default defineComponent({
   name: 'PickerViewColumn',
-  props: {
-    length: {
-      type: [Number, String],
-      default: 0,
-    },
-  },
+  props,
   data: () => ({
     _isMounted: false,
   }),
@@ -61,45 +66,13 @@ export default defineComponent({
     let pickerViewHeight = ref(0)
     pickerViewHeight.value = parseFloat(pickerViewProps.height as string)
 
-    watch(
-      () => props.length,
-      () => {
-        setTimeout(() => {
-          setCurrent(current.value, true, true)
-        }, 150)
-      }
+    const { setCurrent, onScrollend } = usePickerColumnScroll(
+      props,
+      current,
+      contentRef,
+      indicatorHeight
     )
 
-    let scrollToElementTime: number
-    const setCurrent = (_current: number, animated = true, force: Boolean) => {
-      if (current.value === _current && !force) {
-        return
-      }
-      dom.scrollToElement(contentRef.value, {
-        offset: _current * indicatorHeight.value,
-        animated,
-      })
-      current.value = _current
-      if (animated) {
-        scrollToElementTime = Date.now()
-      }
-    }
-    const onScrollend = (event: {
-      detail: {
-        contentOffset: { x: number; y: number }
-      }
-    }) => {
-      if (Date.now() - scrollToElementTime < 340) {
-        return
-      }
-      const y = event.detail.contentOffset.y
-      const _current = Math.round(y / indicatorHeight.value)
-      if (y % indicatorHeight.value) {
-        setCurrent(_current, true, true)
-      } else {
-        current.value = _current
-      }
-    }
     const checkMounted = () => {
       let height_: number
       let indicatorHeight_: number
@@ -273,3 +246,63 @@ function getHeight(style: Record<string, any>) {
   }
   return value
 }
+
+function usePickerColumnScroll(
+  props: PickerColumnProps,
+  current: WritableComputedRef<number>,
+  contentRef: Ref<HTMLElement | null>,
+  indicatorHeight: Ref<number>
+) {
+  let scrollToElementTime: number
+
+  watch(
+    () => props.length,
+    () => {
+      setTimeout(() => {
+        setCurrent(current.value, true, true)
+      }, 150)
+    }
+  )
+  watch(
+    () => current.value,
+    (_current) => {
+      dom.scrollToElement(contentRef.value, {
+        offset: _current * indicatorHeight.value,
+        animated: true,
+      })
+      scrollToElementTime = Date.now()
+    }
+  )
+
+  const setCurrent = (_current: number, animated = true, force: Boolean) => {
+    if (current.value === _current && !force) {
+      return
+    }
+    dom.scrollToElement(contentRef.value, {
+      offset: _current * indicatorHeight.value,
+      animated,
+    })
+    current.value = _current
+    if (animated) {
+      scrollToElementTime = Date.now()
+    }
+  }
+  const onScrollend = (event: {
+    detail: {
+      contentOffset: { x: number; y: number }
+    }
+  }) => {
+    if (Date.now() - scrollToElementTime < 340) {
+      return
+    }
+    const y = event.detail.contentOffset.y
+    const _current = Math.round(y / indicatorHeight.value)
+    if (y % indicatorHeight.value) {
+      setCurrent(_current, true, true)
+    } else {
+      current.value = _current
+    }
+  }
+
+  return { setCurrent, onScrollend }
+}
diff --git a/packages/uni-components/src/nvue/picker-view/index.tsx b/packages/uni-components/src/nvue/picker-view/index.tsx
index e4223e607..dd3e912fc 100644
--- a/packages/uni-components/src/nvue/picker-view/index.tsx
+++ b/packages/uni-components/src/nvue/picker-view/index.tsx
@@ -8,6 +8,7 @@ import {
   VNode,
   provide,
   ExtractPropTypes,
+  Comment,
 } from 'vue'
 import { extend } from '@vue/shared'
 import {
@@ -35,8 +36,12 @@ export default defineComponent({
     const trigger = useCustomEvent<EmitEvent<typeof emit>>(rootRef, emit)
 
     let columnVNodes: VNode[] = []
-    const getItemIndex = (vnode: VNode) =>
-      Array.prototype.indexOf.call(columnVNodes, vnode)
+    const getItemIndex = (vnode: VNode) => {
+      return Array.prototype.indexOf.call(
+        columnVNodes.filter((vnode) => vnode.type !== Comment),
+        vnode
+      )
+    }
     const getPickerViewColumn: GetPickerViewColumn = (columnInstance) => {
       return computed({
         get() {
@@ -81,7 +86,7 @@ export default defineComponent({
             preventGesture: true,
           }}
         >
-          <view class="uni-picker-view-wrapper">{defaultSlots}</view>
+          <view class="uni-picker-view-wrapper">{columnVNodes}</view>
         </view>
       )
     }
-- 
GitLab