From 356aa1a9ae04ad59ed47df465754732460a2bccd Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 18 Mar 2025 19:52:47 +0800
Subject: [PATCH 1/8] =?UTF-8?q?feat(pickerview):=20=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E5=80=BC=E5=A2=9E=E5=8A=A0class=E7=B1=BB=E5=90=8D=E7=94=A8?=
 =?UTF-8?q?=E4=BA=8E=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/pickerview/pickerroller.taro.tsx | 10 +++++----
 src/packages/pickerview/pickerroller.tsx      | 21 +++++++++++++------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/packages/pickerview/pickerroller.taro.tsx b/src/packages/pickerview/pickerroller.taro.tsx
index a1c677a533..3498aea0b9 100644
--- a/src/packages/pickerview/pickerroller.taro.tsx
+++ b/src/packages/pickerview/pickerroller.taro.tsx
@@ -5,6 +5,7 @@ import React, {
   ForwardRefRenderFunction,
   useImperativeHandle,
 } from 'react'
+import classNames from 'classnames'
 import { View } from '@tarojs/components'
 import { useTouch } from '@/hooks/use-touch'
 import { passiveSupported } from '@/utils/supports-passive'
@@ -135,7 +136,7 @@ const InternalPickerRoller: ForwardRefRenderFunction<
     const index = options.findIndex(
       (item: PickerOption) => item.value === selectedValue
     )
-    setCurrentIndex(index === -1 ? 1 : index + 1)
+    setCurrentIndex(index === -1 ? 0 : index + 1)
     const move = index * lineSpacing.current
     shouldSelect && selectValue(-move)
     handleMove(-move)
@@ -227,9 +228,10 @@ const InternalPickerRoller: ForwardRefRenderFunction<
         {threeDimensional &&
           options.map((item: PickerOption, index: number) => (
             <View
-              className={`nut-pickerview-roller-item ${
-                isItemHidden(index + 1) && 'nut-pickerview-roller-item-hidden'
-              }`}
+              className={classNames('nut-pickerview-roller-item', {
+                'nut-pickerview-roller-item-hidden': isItemHidden(index + 1),
+                'nut-pickerview-roller-item-active': index + 1 === currentIndex,
+              })}
               style={rollerStyle(index)}
               key={item.value ?? index}
             >
diff --git a/src/packages/pickerview/pickerroller.tsx b/src/packages/pickerview/pickerroller.tsx
index 8ca70491dc..9f7a17bec5 100644
--- a/src/packages/pickerview/pickerroller.tsx
+++ b/src/packages/pickerview/pickerroller.tsx
@@ -29,7 +29,7 @@ const InternalPickerRoller: ForwardRefRenderFunction<
   const INERTIA_DISTANCE = 15
   const ROTATION = 20
   const touch = useTouch()
-  const [currentIndex, setCurrentIndex] = useState(1)
+  const [currentIndex, setCurrentIndex] = useState(0)
   const lineSpacing = useRef(36)
   const [touchTime, setTouchTime] = useState(0)
   const [touchDeg, setTouchDeg] = useState('0deg')
@@ -85,7 +85,14 @@ const InternalPickerRoller: ForwardRefRenderFunction<
       )
       if (deg >= 0 && deg < (options.length + 1) * ROTATION) {
         applyTransform('', `${deg}deg`, undefined, updatedMove)
-        setCurrentIndex(
+        deg > 0 &&
+          setCurrentIndex(
+            Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1
+          )
+        console.log(
+          's',
+          deg,
+          updatedMove,
           Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1
         )
       }
@@ -133,7 +140,8 @@ const InternalPickerRoller: ForwardRefRenderFunction<
     const index = options.findIndex(
       (item: PickerOption) => item.value === selectedValue
     )
-    setCurrentIndex(index === -1 ? 1 : index + 1)
+
+    setCurrentIndex(index === -1 ? 0 : index + 1)
     const move = index * lineSpacing.current
     shouldSelect && selectValue(-move)
     handleMove(-move)
@@ -214,9 +222,10 @@ const InternalPickerRoller: ForwardRefRenderFunction<
         {threeDimensional &&
           options.map((item: PickerOption, index: number) => (
             <div
-              className={`nut-pickerview-roller-item ${
-                isItemHidden(index + 1) && 'nut-pickerview-roller-item-hidden'
-              }`}
+              className={classNames('nut-pickerview-roller-item', {
+                'nut-pickerview-roller-item-hidden': isItemHidden(index + 1),
+                'nut-pickerview-roller-item-active': index + 1 === currentIndex,
+              })}
               style={rollerStyle(index)}
               key={item.value ?? index}
             >

From 9b1b5c97815093f252ceda9e13573c02fd83292e Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 18 Mar 2025 20:14:47 +0800
Subject: [PATCH 2/8] =?UTF-8?q?feat(pickerview):=20=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E5=80=BC=E5=A2=9E=E5=8A=A0class=E7=B1=BB=E5=90=8D=E7=94=A8?=
 =?UTF-8?q?=E4=BA=8E=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/pickerview/pickerroller.taro.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/packages/pickerview/pickerroller.taro.tsx b/src/packages/pickerview/pickerroller.taro.tsx
index 3498aea0b9..2f8b92611b 100644
--- a/src/packages/pickerview/pickerroller.taro.tsx
+++ b/src/packages/pickerview/pickerroller.taro.tsx
@@ -32,7 +32,7 @@ const InternalPickerRoller: ForwardRefRenderFunction<
   const INERTIA_DISTANCE = 15
   const ROTATION = 20
   const touch = useTouch()
-  const [currentIndex, setCurrentIndex] = useState(1)
+  const [currentIndex, setCurrentIndex] = useState(0)
   const lineSpacing = useRef(36)
   const [touchTime, setTouchTime] = useState(0)
   const [touchDeg, setTouchDeg] = useState('0deg')
@@ -88,9 +88,10 @@ const InternalPickerRoller: ForwardRefRenderFunction<
       )
       if (deg >= 0 && deg < (options.length + 1) * ROTATION) {
         applyTransform('', `${deg}deg`, undefined, updatedMove)
-        setCurrentIndex(
-          Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1
-        )
+        deg > 0 &&
+          setCurrentIndex(
+            Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1
+          )
       }
     }
   }

From cb5a57e8fa715e1e771685f70759b27445f4815f Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 18 Mar 2025 20:17:07 +0800
Subject: [PATCH 3/8] fix: remove console

---
 src/packages/pickerview/pickerroller.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/packages/pickerview/pickerroller.tsx b/src/packages/pickerview/pickerroller.tsx
index 9f7a17bec5..ba4823c091 100644
--- a/src/packages/pickerview/pickerroller.tsx
+++ b/src/packages/pickerview/pickerroller.tsx
@@ -5,6 +5,7 @@ import React, {
   ForwardRefRenderFunction,
   useImperativeHandle,
 } from 'react'
+import classNames from 'classnames'
 import { useTouch } from '@/hooks/use-touch'
 import { passiveSupported } from '@/utils/supports-passive'
 import { WebPickerRollerProps, PickerOption } from '@/types'
@@ -89,12 +90,6 @@ const InternalPickerRoller: ForwardRefRenderFunction<
           setCurrentIndex(
             Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1
           )
-        console.log(
-          's',
-          deg,
-          updatedMove,
-          Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1
-        )
       }
     }
   }

From 396d47adaa168b76a4b47be0c16a24a53e2bfe8b Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 19 Mar 2025 10:08:33 +0800
Subject: [PATCH 4/8] chore: add types alias

---
 packages/nutui-taro-demo/config/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nutui-taro-demo/config/index.js b/packages/nutui-taro-demo/config/index.js
index afbbd552af..f2f8d1f9da 100644
--- a/packages/nutui-taro-demo/config/index.js
+++ b/packages/nutui-taro-demo/config/index.js
@@ -121,6 +121,7 @@ const config = {
     '@/locales': path.resolve(__dirname, '../../../src/locales'),
     '@/utils': path.resolve(__dirname, '../../../src/utils'),
     '@/hooks': path.resolve(__dirname, '../../../src/hooks'),
+    '@/types': path.resolve(__dirname, '../../../src/types'),
     '@nutui/nutui-react-taro': path.resolve(
       __dirname,
       '../../../src/packages/nutui.react.taro.ts'

From 8b368d2282f63dc776216438c199cca34147a744 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 19 Mar 2025 10:13:48 +0800
Subject: [PATCH 5/8] test: update snap

---
 .../__snapshots__/pickerview.spec.tsx.snap    | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/packages/pickerview/__test__/__snapshots__/pickerview.spec.tsx.snap b/src/packages/pickerview/__test__/__snapshots__/pickerview.spec.tsx.snap
index 723cd2df1b..07effa75bf 100644
--- a/src/packages/pickerview/__test__/__snapshots__/pickerview.spec.tsx.snap
+++ b/src/packages/pickerview/__test__/__snapshots__/pickerview.spec.tsx.snap
@@ -13,49 +13,49 @@ exports[`should match base 1`] = `
         style="transition: transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1); transform: rotate3d(1, 0, 0, 20deg);"
       >
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item nut-pickerview-roller-item-active"
           style="transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 115px);"
         >
           南京市
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 115px);"
         >
           无锡市
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 115px);"
         >
           海北藏族自治区
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 115px);"
         >
           北京市
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 115px);"
         >
           连云港市
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -120deg) translate3d(0px, 0px, 115px);"
         >
           大庆市
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -140deg) translate3d(0px, 0px, 115px);"
         >
           绥化市
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -160deg) translate3d(0px, 0px, 115px);"
         >
           潍坊市
@@ -91,13 +91,13 @@ exports[`should match cascade 1`] = `
         style="transition: transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1); transform: rotate3d(1, 0, 0, 20deg);"
       >
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item nut-pickerview-roller-item-active"
           style="transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 115px);"
         >
           北京 | 测试
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 115px);"
         >
           上海 | 测试
@@ -112,37 +112,37 @@ exports[`should match cascade 1`] = `
         style="transition: transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1); transform: rotate3d(1, 0, 0, 0deg);"
       >
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 115px);"
         >
           朝阳区 | 测试
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 115px);"
         >
           海淀区 | 测试
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 115px);"
         >
           大兴区 | 测试
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 115px);"
         >
           东城区 | 测试
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 115px);"
         >
           西城区 | 测试
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -120deg) translate3d(0px, 0px, 115px);"
         >
           丰台区 | 测试
@@ -249,31 +249,31 @@ exports[`should render with Multi Column 1`] = `
         style="transition: transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1); transform: rotate3d(1, 0, 0, 0deg);"
       >
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 115px);"
         >
           周一
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 115px);"
         >
           周二
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 115px);"
         >
           周三
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 115px);"
         >
           周四
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 115px);"
         >
           周五
@@ -288,19 +288,19 @@ exports[`should render with Multi Column 1`] = `
         style="transition: transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1); transform: rotate3d(1, 0, 0, 0deg);"
       >
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 115px);"
         >
           上午
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 115px);"
         >
           下午
         </div>
         <div
-          class="nut-pickerview-roller-item false"
+          class="nut-pickerview-roller-item"
           style="transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 115px);"
         >
           晚上

From 3312131f959991c0e6d645031e4de99658d664d5 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Wed, 19 Mar 2025 15:11:09 +0800
Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=E5=B0=8F=E7=A8=8B=E5=BA=8F?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E8=A1=8C=E9=AB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/picker/demos/taro/demo8.tsx      |  1 -
 src/packages/pickerview/pickerroller.taro.tsx | 71 ++++++++++++++-----
 src/packages/pickerview/pickerroller.tsx      | 14 ++--
 src/packages/pickerview/pickerview.scss       |  4 +-
 4 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/src/packages/picker/demos/taro/demo8.tsx b/src/packages/picker/demos/taro/demo8.tsx
index 5cb9b00514..d15b00188b 100644
--- a/src/packages/picker/demos/taro/demo8.tsx
+++ b/src/packages/picker/demos/taro/demo8.tsx
@@ -45,7 +45,6 @@ const Demo8 = () => {
       />
       <ConfigProvider
         theme={{
-          nutuiPickerItemHeight: '48px',
           nutuiPickerItemActiveLineBorder:
             '1px dashed var(--nutui-color-primary)',
           nutuiPickerItemTextColor: 'var(--nutui-color-primary)',
diff --git a/src/packages/pickerview/pickerroller.taro.tsx b/src/packages/pickerview/pickerroller.taro.tsx
index 2f8b92611b..ce7dc445ec 100644
--- a/src/packages/pickerview/pickerroller.taro.tsx
+++ b/src/packages/pickerview/pickerroller.taro.tsx
@@ -13,6 +13,8 @@ import { TaroPickerRollerProps, PickerOption } from '@/types'
 import { web } from '@/utils/platform-taro'
 import { preventDefault } from '@/utils'
 import { momentum, useStyles } from './utils'
+import useUuid from '@/hooks/use-uuid'
+import { getRectByTaro } from '@/utils/get-rect-by-taro'
 
 const InternalPickerRoller: ForwardRefRenderFunction<
   { stopMomentum: () => void; moving: boolean },
@@ -27,6 +29,9 @@ const InternalPickerRoller: ForwardRefRenderFunction<
     renderLabel = (item: PickerOption) => item.label,
   } = props
 
+  const classPrefix = 'nut-pickerview-roller'
+  const uuid = useUuid()
+
   const DEFAULT_DURATION = 200
   const INERTIA_TIME = 300
   const INERTIA_DISTANCE = 15
@@ -39,10 +44,12 @@ const InternalPickerRoller: ForwardRefRenderFunction<
   const isMoving = useRef(false)
   const rollerRef = useRef<any>(null)
   const pickerRollerRef = useRef<any>(null)
+  const placeholderRef = useRef(null)
   const [startTime, setStartTime] = useState(0)
   const [startY, setStartY] = useState(0)
   const transformY = useRef(0)
   const [scrollDistance, setScrollDistance] = useState(0)
+  const [isGetLineSpacing, setGetStatus] = useState(web())
 
   const { touchRollerStyle, touchTiledStyle, rollerStyle } = useStyles(
     touchTime,
@@ -149,18 +156,39 @@ const InternalPickerRoller: ForwardRefRenderFunction<
     selectValue(scrollDistance)
   }
 
+  const getReactHeight = async () => {
+    try {
+      const placeholder = await getRectByTaro(placeholderRef.current)
+      const placeholderHeight = placeholder.height || 0
+      return placeholderHeight
+    } catch (error) {
+      console.error('获取高度失败:', error)
+      return 0
+    }
+  }
+
   // lineSpacing.current CSS variable
   useEffect(() => {
     const element = pickerRollerRef.current
+    let currentLineSpacing
     if (element && web()) {
       const computedStyle = getComputedStyle(element)
-      const currentLineSpacing = computedStyle.getPropertyValue(
+      currentLineSpacing = computedStyle.getPropertyValue(
         '--nutui-picker-item-height'
       )
-      !!currentLineSpacing &&
-        (lineSpacing.current = parseFloat(currentLineSpacing))
+      if (currentLineSpacing) {
+        lineSpacing.current = parseFloat(currentLineSpacing)
+      }
+    } else {
+      getReactHeight().then((height) => {
+        currentLineSpacing = height
+        if (currentLineSpacing) {
+          lineSpacing.current = currentLineSpacing
+          setGetStatus(true)
+        }
+      })
     }
-  }, [pickerRollerRef.current])
+  }, [pickerRollerRef.current, placeholderRef.current])
 
   useEffect(() => {
     isMoving.current = false
@@ -220,7 +248,12 @@ const InternalPickerRoller: ForwardRefRenderFunction<
   return (
     <View className="nut-pickerview-list" ref={pickerRollerRef}>
       <View
-        className="nut-pickerview-roller"
+        className={`${classPrefix}-placeholder`}
+        ref={placeholderRef}
+        id={`${classPrefix}-placeholder-${uuid}`}
+      />
+      <View
+        className={classPrefix}
         ref={rollerRef}
         style={threeDimensional ? touchRollerStyle() : touchTiledStyle()}
         onTransitionEnd={stopMomentumScroll}
@@ -228,23 +261,29 @@ const InternalPickerRoller: ForwardRefRenderFunction<
         {/* 3D 效果 */}
         {threeDimensional &&
           options.map((item: PickerOption, index: number) => (
-            <View
-              className={classNames('nut-pickerview-roller-item', {
-                'nut-pickerview-roller-item-hidden': isItemHidden(index + 1),
-                'nut-pickerview-roller-item-active': index + 1 === currentIndex,
-              })}
-              style={rollerStyle(index)}
-              key={item.value ?? index}
-            >
-              {renderLabel(item)}
-            </View>
+            <>
+              {isGetLineSpacing ? (
+                <View
+                  className={classNames(`${classPrefix}-item`, {
+                    [`${classPrefix}-item-hidden`]: isItemHidden(index + 1),
+                    [`${classPrefix}-item-active`]: index + 1 === currentIndex,
+                  })}
+                  style={rollerStyle(index)}
+                  key={item.value ?? index}
+                >
+                  {renderLabel(item)}
+                </View>
+              ) : null}
+            </>
           ))}
         {/* Tiled */}
         {!threeDimensional &&
           options.map((item: PickerOption, index: number) => {
             return (
               <View
-                className="nut-pickerview-roller-item-tiled"
+                className={classNames(`${classPrefix}-item-tiled`, {
+                  [`${classPrefix}-item-active`]: index + 1 === currentIndex,
+                })}
                 key={item.value ?? index}
               >
                 {renderLabel(item)}
diff --git a/src/packages/pickerview/pickerroller.tsx b/src/packages/pickerview/pickerroller.tsx
index ba4823c091..586d450367 100644
--- a/src/packages/pickerview/pickerroller.tsx
+++ b/src/packages/pickerview/pickerroller.tsx
@@ -25,6 +25,8 @@ const InternalPickerRoller: ForwardRefRenderFunction<
     renderLabel = (item: PickerOption) => item.label,
   } = props
 
+  const classPrefix = 'nut-pickerview-roller'
+
   const DEFAULT_DURATION = 200
   const INERTIA_TIME = 300
   const INERTIA_DISTANCE = 15
@@ -208,7 +210,7 @@ const InternalPickerRoller: ForwardRefRenderFunction<
   return (
     <div className="nut-pickerview-list" ref={pickerRollerRef}>
       <div
-        className="nut-pickerview-roller"
+        className={classPrefix}
         ref={rollerRef}
         style={threeDimensional ? touchRollerStyle() : touchTiledStyle()}
         onTransitionEnd={stopMomentumScroll}
@@ -217,9 +219,9 @@ const InternalPickerRoller: ForwardRefRenderFunction<
         {threeDimensional &&
           options.map((item: PickerOption, index: number) => (
             <div
-              className={classNames('nut-pickerview-roller-item', {
-                'nut-pickerview-roller-item-hidden': isItemHidden(index + 1),
-                'nut-pickerview-roller-item-active': index + 1 === currentIndex,
+              className={classNames(`${classPrefix}-item`, {
+                [`${classPrefix}-item-hidden`]: isItemHidden(index + 1),
+                [`${classPrefix}-item-active`]: index + 1 === currentIndex,
               })}
               style={rollerStyle(index)}
               key={item.value ?? index}
@@ -231,7 +233,9 @@ const InternalPickerRoller: ForwardRefRenderFunction<
         {!threeDimensional &&
           options.map((item: PickerOption, index: number) => (
             <div
-              className="nut-pickerview-roller-item-tiled"
+              className={classNames(`${classPrefix}-item-tiled`, {
+                [`${classPrefix}-item-active`]: index + 1 === currentIndex,
+              })}
               key={item.value ?? index}
             >
               {renderLabel(item)}
diff --git a/src/packages/pickerview/pickerview.scss b/src/packages/pickerview/pickerview.scss
index 1face81104..05a81ebbf4 100644
--- a/src/packages/pickerview/pickerview.scss
+++ b/src/packages/pickerview/pickerview.scss
@@ -1,5 +1,4 @@
 .nut-pickerview {
-  --nutui-picker-item-height: 36px;
   position: relative;
   display: flex;
   width: 100%;
@@ -50,6 +49,9 @@
     height: $picker-item-height;
     z-index: 1;
     transform-style: preserve-3d;
+    &-placeholder {
+      height: $picker-item-height;
+    }
   }
 
   &-roller-item {

From 8dc26767243ead422936cb5ecb92e86907cec70f Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Wed, 19 Mar 2025 15:20:52 +0800
Subject: [PATCH 7/8] fix: update test

---
 .../datepickerview.spec.tsx.snap              | 431 ------------------
 .../__snapshots__/pickerview.spec.tsx.snap    |   2 +-
 2 files changed, 1 insertion(+), 432 deletions(-)
 delete mode 100644 src/packages/datepickerview/__test__/__snapshots__/datepickerview.spec.tsx.snap

diff --git a/src/packages/datepickerview/__test__/__snapshots__/datepickerview.spec.tsx.snap b/src/packages/datepickerview/__test__/__snapshots__/datepickerview.spec.tsx.snap
deleted file mode 100644
index 4f973c2b0b..0000000000
--- a/src/packages/datepickerview/__test__/__snapshots__/datepickerview.spec.tsx.snap
+++ /dev/null
@@ -1,431 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`should match snapshot 1`] = `
-<div>
-  <div
-    class="nut-datepickerview"
-  >
-    <div
-      class="nut-pickerview"
-    >
-      <div
-        class="nut-pickerview-list"
-      >
-        <div
-          class="nut-pickerview-roller"
-          style="transition: transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1); transform: rotate3d(1, 0, 0, 20deg);"
-        >
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 115px);"
-          >
-            2015
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 115px);"
-          >
-            2016
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 115px);"
-          >
-            2017
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 115px);"
-          >
-            2018
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 115px);"
-          >
-            2019
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -120deg) translate3d(0px, 0px, 115px);"
-          >
-            2020
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -140deg) translate3d(0px, 0px, 115px);"
-          >
-            2021
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -160deg) translate3d(0px, 0px, 115px);"
-          >
-            2022
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -180deg) translate3d(0px, 0px, 115px);"
-          >
-            2023
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -200deg) translate3d(0px, 0px, 115px);"
-          >
-            2024
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -220deg) translate3d(0px, 0px, 115px);"
-          >
-            2025
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -240deg) translate3d(0px, 0px, 115px);"
-          >
-            2026
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -260deg) translate3d(0px, 0px, 115px);"
-          >
-            2027
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -280deg) translate3d(0px, 0px, 115px);"
-          >
-            2028
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -300deg) translate3d(0px, 0px, 115px);"
-          >
-            2029
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -320deg) translate3d(0px, 0px, 115px);"
-          >
-            2030
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -340deg) translate3d(0px, 0px, 115px);"
-          >
-            2031
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -360deg) translate3d(0px, 0px, 115px);"
-          >
-            2032
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -380deg) translate3d(0px, 0px, 115px);"
-          >
-            2033
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -400deg) translate3d(0px, 0px, 115px);"
-          >
-            2034
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -420deg) translate3d(0px, 0px, 115px);"
-          >
-            2035
-          </div>
-        </div>
-      </div>
-      <div
-        class="nut-pickerview-list"
-      >
-        <div
-          class="nut-pickerview-roller"
-          style="transition: transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1); transform: rotate3d(1, 0, 0, 20deg);"
-        >
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 115px);"
-          >
-            01
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 115px);"
-          >
-            02
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 115px);"
-          >
-            03
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 115px);"
-          >
-            04
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 115px);"
-          >
-            05
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -120deg) translate3d(0px, 0px, 115px);"
-          >
-            06
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -140deg) translate3d(0px, 0px, 115px);"
-          >
-            07
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -160deg) translate3d(0px, 0px, 115px);"
-          >
-            08
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -180deg) translate3d(0px, 0px, 115px);"
-          >
-            09
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -200deg) translate3d(0px, 0px, 115px);"
-          >
-            10
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -220deg) translate3d(0px, 0px, 115px);"
-          >
-            11
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -240deg) translate3d(0px, 0px, 115px);"
-          >
-            12
-          </div>
-        </div>
-      </div>
-      <div
-        class="nut-pickerview-list"
-      >
-        <div
-          class="nut-pickerview-roller"
-          style="transition: transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1); transform: rotate3d(1, 0, 0, 20deg);"
-        >
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 115px);"
-          >
-            01
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 115px);"
-          >
-            02
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 115px);"
-          >
-            03
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 115px);"
-          >
-            04
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 115px);"
-          >
-            05
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -120deg) translate3d(0px, 0px, 115px);"
-          >
-            06
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -140deg) translate3d(0px, 0px, 115px);"
-          >
-            07
-          </div>
-          <div
-            class="nut-pickerview-roller-item false"
-            style="transform: rotate3d(1, 0, 0, -160deg) translate3d(0px, 0px, 115px);"
-          >
-            08
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -180deg) translate3d(0px, 0px, 115px);"
-          >
-            09
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -200deg) translate3d(0px, 0px, 115px);"
-          >
-            10
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -220deg) translate3d(0px, 0px, 115px);"
-          >
-            11
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -240deg) translate3d(0px, 0px, 115px);"
-          >
-            12
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -260deg) translate3d(0px, 0px, 115px);"
-          >
-            13
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -280deg) translate3d(0px, 0px, 115px);"
-          >
-            14
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -300deg) translate3d(0px, 0px, 115px);"
-          >
-            15
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -320deg) translate3d(0px, 0px, 115px);"
-          >
-            16
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -340deg) translate3d(0px, 0px, 115px);"
-          >
-            17
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -360deg) translate3d(0px, 0px, 115px);"
-          >
-            18
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -380deg) translate3d(0px, 0px, 115px);"
-          >
-            19
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -400deg) translate3d(0px, 0px, 115px);"
-          >
-            20
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -420deg) translate3d(0px, 0px, 115px);"
-          >
-            21
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -440deg) translate3d(0px, 0px, 115px);"
-          >
-            22
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -460deg) translate3d(0px, 0px, 115px);"
-          >
-            23
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -480deg) translate3d(0px, 0px, 115px);"
-          >
-            24
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -500deg) translate3d(0px, 0px, 115px);"
-          >
-            25
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -520deg) translate3d(0px, 0px, 115px);"
-          >
-            26
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -540deg) translate3d(0px, 0px, 115px);"
-          >
-            27
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -560deg) translate3d(0px, 0px, 115px);"
-          >
-            28
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -580deg) translate3d(0px, 0px, 115px);"
-          >
-            29
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -600deg) translate3d(0px, 0px, 115px);"
-          >
-            30
-          </div>
-          <div
-            class="nut-pickerview-roller-item nut-pickerview-roller-item-hidden"
-            style="transform: rotate3d(1, 0, 0, -620deg) translate3d(0px, 0px, 115px);"
-          >
-            31
-          </div>
-        </div>
-      </div>
-      <div
-        class="nut-pickerview-mask"
-      />
-      <div
-        class="nut-pickerview-indicator"
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/packages/pickerview/__test__/__snapshots__/pickerview.spec.tsx.snap b/src/packages/pickerview/__test__/__snapshots__/pickerview.spec.tsx.snap
index 07effa75bf..3dd6d87ed8 100644
--- a/src/packages/pickerview/__test__/__snapshots__/pickerview.spec.tsx.snap
+++ b/src/packages/pickerview/__test__/__snapshots__/pickerview.spec.tsx.snap
@@ -180,7 +180,7 @@ exports[`should render tiled 1`] = `
         style="transition: transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1); transform: translate3d(0, 0px, 0);"
       >
         <div
-          class="nut-pickerview-roller-item-tiled"
+          class="nut-pickerview-roller-item-tiled nut-pickerview-roller-item-active"
         >
           南京市
         </div>

From 32174c7861451bc18a6500a6d0d889e17d1f0618 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Fri, 21 Mar 2025 15:40:51 +0800
Subject: [PATCH 8/8] =?UTF-8?q?fix:=20cr=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/picker/demos/h5/demo8.tsx        |  3 +--
 src/packages/picker/demos/taro/demo8.tsx      |  1 +
 src/packages/pickerview/pickerroller.taro.tsx | 11 +++--------
 src/packages/pickerview/pickerview.scss       |  3 ---
 4 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/packages/picker/demos/h5/demo8.tsx b/src/packages/picker/demos/h5/demo8.tsx
index 4f16c7e357..500c379283 100644
--- a/src/packages/picker/demos/h5/demo8.tsx
+++ b/src/packages/picker/demos/h5/demo8.tsx
@@ -45,14 +45,13 @@ const Demo8 = () => {
       />
       <ConfigProvider
         theme={{
-          nutuiPickerItemHeight: '48px',
+          nutuiPickerItemHeight: '28px',
           nutuiPickerItemActiveLineBorder:
             '1px dashed var(--nutui-color-primary)',
           nutuiPickerItemTextColor: 'var(--nutui-color-primary)',
         }}
       >
         <Picker
-          style={{ '--nutui-picker-item-height': '28px' }}
           title="请选择城市"
           visible={visible}
           options={options}
diff --git a/src/packages/picker/demos/taro/demo8.tsx b/src/packages/picker/demos/taro/demo8.tsx
index d15b00188b..a8fa692632 100644
--- a/src/packages/picker/demos/taro/demo8.tsx
+++ b/src/packages/picker/demos/taro/demo8.tsx
@@ -48,6 +48,7 @@ const Demo8 = () => {
           nutuiPickerItemActiveLineBorder:
             '1px dashed var(--nutui-color-primary)',
           nutuiPickerItemTextColor: 'var(--nutui-color-primary)',
+          nutuiPickerItemHeight: '28px',
         }}
       >
         <Picker
diff --git a/src/packages/pickerview/pickerroller.taro.tsx b/src/packages/pickerview/pickerroller.taro.tsx
index ce7dc445ec..305070a598 100644
--- a/src/packages/pickerview/pickerroller.taro.tsx
+++ b/src/packages/pickerview/pickerroller.taro.tsx
@@ -44,7 +44,6 @@ const InternalPickerRoller: ForwardRefRenderFunction<
   const isMoving = useRef(false)
   const rollerRef = useRef<any>(null)
   const pickerRollerRef = useRef<any>(null)
-  const placeholderRef = useRef(null)
   const [startTime, setStartTime] = useState(0)
   const [startY, setStartY] = useState(0)
   const transformY = useRef(0)
@@ -158,7 +157,7 @@ const InternalPickerRoller: ForwardRefRenderFunction<
 
   const getReactHeight = async () => {
     try {
-      const placeholder = await getRectByTaro(placeholderRef.current)
+      const placeholder = await getRectByTaro(rollerRef.current)
       const placeholderHeight = placeholder.height || 0
       return placeholderHeight
     } catch (error) {
@@ -188,7 +187,7 @@ const InternalPickerRoller: ForwardRefRenderFunction<
         }
       })
     }
-  }, [pickerRollerRef.current, placeholderRef.current])
+  }, [pickerRollerRef.current, rollerRef.current])
 
   useEffect(() => {
     isMoving.current = false
@@ -247,13 +246,9 @@ const InternalPickerRoller: ForwardRefRenderFunction<
 
   return (
     <View className="nut-pickerview-list" ref={pickerRollerRef}>
-      <View
-        className={`${classPrefix}-placeholder`}
-        ref={placeholderRef}
-        id={`${classPrefix}-placeholder-${uuid}`}
-      />
       <View
         className={classPrefix}
+        id={`${classPrefix}-${uuid}`}
         ref={rollerRef}
         style={threeDimensional ? touchRollerStyle() : touchTiledStyle()}
         onTransitionEnd={stopMomentumScroll}
diff --git a/src/packages/pickerview/pickerview.scss b/src/packages/pickerview/pickerview.scss
index 05a81ebbf4..7fb1000d74 100644
--- a/src/packages/pickerview/pickerview.scss
+++ b/src/packages/pickerview/pickerview.scss
@@ -49,9 +49,6 @@
     height: $picker-item-height;
     z-index: 1;
     transform-style: preserve-3d;
-    &-placeholder {
-      height: $picker-item-height;
-    }
   }
 
   &-roller-item {