@tarojs/components-react 4.1.9-beta.1 → 4.1.9-beta.1-patch.2

package/dist/solid/components/picker/picker-group.js

@@ -1,4 +1,4 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps } from 'solid-js/web';
 import { View, ScrollView } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import * as React from 'react';
@@ -7,27 +7,91 @@ import * as React from 'react';
 const PICKER_LINE_HEIGHT = 34; // px
 const PICKER_VISIBLE_ITEMS = 7; // 可见行数
 const PICKER_BLANK_ITEMS = 3; // 空白行数
-// 辅助函数：获取系统信息的 lengthScaleRatio 并设置 targetScrollTop
-const setTargetScrollTopWithScale = (setTargetScrollTop, baseValue, randomOffset) => {
-  Taro.getSystemInfo({
-    success: res => {
-      var _a;
-      // 使用类型断言访问可能不存在的 lengthScaleRatio 属性
-      const lengthScaleRatio = (_a = res.lengthScaleRatio) !== null && _a !== void 0 ? _a : 1;
-      if (!res.lengthScaleRatio) {
-        console.warn('Taro.getSystemInfo: lengthScaleRatio 不存在，使用默认值 1');
-      }
-      const scaledValue = baseValue * lengthScaleRatio;
-      const finalValue = randomOffset !== undefined ? scaledValue + randomOffset : scaledValue;
-      setTargetScrollTop(finalValue);
-    },
-    fail: err => {
-      console.error('获取系统信息失败:', err);
-      // 失败时使用默认值 1
-      const finalValue = randomOffset !== undefined ? baseValue + randomOffset : baseValue;
-      setTargetScrollTop(finalValue);
+const getIndicatorStyle = lineColor => {
+  return {
+    borderTopColor: lineColor,
+    borderBottomColor: lineColor
+  };
+};
+// 大屏方案版本要求
+const MIN_DESIGN_APP_VERSION = 16;
+// 判断是否启用测量值缩放适配（true=启用, false=使用系统侧缩放）
+const resolveUseMeasuredScale = res => {
+  // H5/weapp 不参与大屏系数
+  if (process.env.TARO_ENV === 'h5' || process.env.TARO_ENV === 'weapp') {
+    return false;
+  }
+  const designAppVersionRaw = res.designAppVersion;
+  const designAppVersionMajor = designAppVersionRaw != null ? parseInt(String(designAppVersionRaw).trim(), 10) : Number.NaN;
+  if (!Number.isFinite(designAppVersionMajor) || designAppVersionMajor < MIN_DESIGN_APP_VERSION) {
+    return false;
+  }
+  const platform = String(res.platform || '').toLowerCase();
+  if (platform === 'harmony' || platform === 'android' || platform === 'ios') {
+    return true;
+  }
+  return false;
+};
+// 辅助函数：计算 lengthScaleRatio
+const calculateLengthScaleRatio = res => {
+  let lengthScaleRatio = res === null || res === void 0 ? void 0 : res.lengthScaleRatio;
+  if (lengthScaleRatio == null || lengthScaleRatio === 0) {
+    console.warn('Taro.getSystemInfo: lengthScaleRatio 不存在，使用计算值');
+    lengthScaleRatio = 1;
+    if (res.windowWidth < 320) {
+      lengthScaleRatio = res.windowWidth / 320;
+    } else if (res.windowWidth >= 400 && res.windowWidth < 600) {
+      lengthScaleRatio = res.windowWidth / 400;
+    }
+    const shortSide = res.windowWidth < res.windowHeight ? res.windowWidth : res.windowHeight;
+    const isBigScreen = shortSide >= 600;
+    if (isBigScreen) {
+      lengthScaleRatio = shortSide / 720;
     }
-  });
+  }
+  return lengthScaleRatio;
+};
+// 辅助函数：获取系统信息的 lengthScaleRatio 并设置 targetScrollTop
+const setTargetScrollTopWithScale = function (setTargetScrollTop, baseValue, randomOffset) {
+  let lengthScaleRatio = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  // H5 和 weapp 不参与放大计算，直接使用 baseValue
+  if (process.env.TARO_ENV === 'h5' || process.env.TARO_ENV === 'weapp') {
+    const finalValue = randomOffset !== undefined ? baseValue + randomOffset : baseValue;
+    setTargetScrollTop(finalValue);
+    return;
+  }
+  if (process.env.TARO_PLATFORM === 'harmony') {
+    const scaledValue = baseValue;
+    const finalValue = randomOffset !== undefined ? scaledValue + randomOffset : scaledValue;
+    setTargetScrollTop(finalValue);
+  } else {
+    const scaledValue = baseValue * lengthScaleRatio;
+    const finalValue = randomOffset !== undefined ? scaledValue + randomOffset : scaledValue;
+    setTargetScrollTop(finalValue);
+  }
+};
+// 根据 scrollTop 计算选中索引
+// 系统侧缩放模式：scrollHeight 已被系统缩放，直接相除即可
+// 自行缩放模式：需要除以 ratio 换算（harmony 特殊处理，ratio 已内嵌在 itemHeight 中）
+const getSelectedIndex = function (scrollTop, itemHeight) {
+  let lengthScaleRatio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  let useMeasuredScale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  if (!useMeasuredScale || process.env.TARO_PLATFORM === 'harmony') {
+    return Math.round(scrollTop / itemHeight);
+  }
+  return Math.round(scrollTop / lengthScaleRatio / itemHeight);
+};
+// 计算单项高度（返回设计稿值）
+const calculateItemHeight = function (scrollView, lengthScaleRatio) {
+  let useMeasuredScale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (process.env.TARO_PLATFORM === 'harmony') {
+    return useMeasuredScale ? PICKER_LINE_HEIGHT * lengthScaleRatio : PICKER_LINE_HEIGHT;
+  }
+  if (scrollView && (scrollView === null || scrollView === void 0 ? void 0 : scrollView.scrollHeight)) {
+    return useMeasuredScale ? scrollView.scrollHeight / lengthScaleRatio / scrollView.childNodes.length : scrollView.scrollHeight / scrollView.childNodes.length;
+  }
+  console.warn('Height measurement anomaly');
+  return PICKER_LINE_HEIGHT;
 };
 function PickerGroupBasic(props) {
   const {
@@ -40,6 +104,7 @@ function PickerGroupBasic(props) {
     // 使用selectedIndex参数，默认为0
     colors = {}
   } = props;
+  const indicatorStyle = colors.lineColor ? getIndicatorStyle(colors.lineColor) : null;
   const [targetScrollTop, setTargetScrollTop] = React.useState(0);
   const scrollViewRef = React.useRef(null);
   const itemRefs = React.useRef([]);
@@ -47,26 +112,31 @@ function PickerGroupBasic(props) {
   const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
   // 触摸状态用于优化用户体验
   const [isTouching, setIsTouching] = React.useState(false);
+  const lengthScaleRatioRef = React.useRef(1);
+  const useMeasuredScaleRef = React.useRef(false);
   const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
+  // 初始化时计算 lengthScaleRatio 并判定缩放模式
   React.useEffect(() => {
-    var _a;
-    if (process.env.TARO_PLATFORM !== 'harmony') {
-      if (scrollViewRef.current && ((_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeigh)) {
-        itemHeightRef.current = scrollViewRef.current.scrollHeight / scrollViewRef.current.childNodes.length;
-      } else {
-        console.warn('Height measurement anomaly');
+    Taro.getSystemInfo({
+      success: res => {
+        lengthScaleRatioRef.current = calculateLengthScaleRatio(res);
+        useMeasuredScaleRef.current = resolveUseMeasuredScale(res);
+        itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+      },
+      fail: () => {
+        lengthScaleRatioRef.current = 1;
+        useMeasuredScaleRef.current = false;
       }
-    }
+    });
+  }, []);
+  React.useEffect(() => {
+    itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
   }, [range.length]); // 只在range长度变化时重新计算
-  // 获取选中的索引
-  const getSelectedIndex = scrollTop => {
-    return Math.round(scrollTop / itemHeightRef.current);
-  };
   // 当selectedIndex变化时，调整滚动位置
   React.useEffect(() => {
     if (scrollViewRef.current && range.length > 0 && !isTouching) {
       const baseValue = selectedIndex * itemHeightRef.current;
-      setTargetScrollTopWithScale(setTargetScrollTop, baseValue);
+      setTargetScrollTopWithScale(setTargetScrollTop, baseValue, undefined, lengthScaleRatioRef.current);
       setCurrentIndex(selectedIndex);
     }
   }, [selectedIndex, range]);
@@ -83,16 +153,17 @@ function PickerGroupBasic(props) {
     isCenterTimerId.current = setTimeout(() => {
       if (!scrollViewRef.current) return;
       const scrollTop = scrollViewRef.current.scrollTop;
-      const newIndex = getSelectedIndex(scrollTop);
+      const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
       setIsTouching(false);
       const baseValue = newIndex * itemHeightRef.current;
       const randomOffset = Math.random() * 0.001; // 随机数为了在一个项内滚动时强制刷新
-      setTargetScrollTopWithScale(setTargetScrollTop, baseValue, randomOffset);
+      setTargetScrollTopWithScale(setTargetScrollTop, baseValue, randomOffset, lengthScaleRatioRef.current);
       updateIndex(newIndex, columnId);
       onColumnChange === null || onColumnChange === void 0 ? void 0 : onColumnChange({
         columnId,
         index: newIndex
       });
+      isCenterTimerId.current = null;
     }, 100);
   };
   // 滚动处理 - 在滚动时计算索引然后更新选中项样式
@@ -103,7 +174,7 @@ function PickerGroupBasic(props) {
       isCenterTimerId.current = null;
     }
     const scrollTop = scrollViewRef.current.scrollTop;
-    const newIndex = getSelectedIndex(scrollTop);
+    const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
     if (newIndex !== currentIndex) {
       setCurrentIndex(newIndex);
     }
@@ -143,9 +214,11 @@ function PickerGroupBasic(props) {
     get children() {
       return [createComponent(View, {
         className: "taro-picker__mask"
-      }), createComponent(View, {
+      }), createComponent(View, mergeProps({
         className: "taro-picker__indicator"
-      }), createComponent(ScrollView, {
+      }, indicatorStyle ? {
+        style: indicatorStyle
+      } : {})), createComponent(ScrollView, {
         ref: scrollViewRef,
         scrollY: true,
         showScrollbar: false,
@@ -173,30 +246,37 @@ function PickerGroupTime(props) {
     selectedIndex = 0,
     colors = {}
   } = props;
+  const indicatorStyle = colors.lineColor ? getIndicatorStyle(colors.lineColor) : null;
   const [targetScrollTop, setTargetScrollTop] = React.useState(0);
   const scrollViewRef = React.useRef(null);
   const itemRefs = React.useRef([]);
   const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
   const [isTouching, setIsTouching] = React.useState(false);
+  const lengthScaleRatioRef = React.useRef(1);
+  const useMeasuredScaleRef = React.useRef(false);
   const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
+  // 初始化时计算 lengthScaleRatio 并判定缩放模式
   React.useEffect(() => {
-    var _a;
-    if (process.env.TARO_PLATFORM !== 'harmony') {
-      if (scrollViewRef.current && ((_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeigh)) {
-        itemHeightRef.current = scrollViewRef.current.scrollHeight / scrollViewRef.current.childNodes.length;
-      } else {
-        console.warn('Height measurement anomaly');
+    Taro.getSystemInfo({
+      success: res => {
+        lengthScaleRatioRef.current = calculateLengthScaleRatio(res);
+        useMeasuredScaleRef.current = resolveUseMeasuredScale(res);
+        itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+      },
+      fail: () => {
+        lengthScaleRatioRef.current = 1;
+        useMeasuredScaleRef.current = false;
       }
-    }
+    });
+  }, []);
+  React.useEffect(() => {
+    itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
   }, [range.length]); // 只在range长度变化时重新计算
-  const getSelectedIndex = scrollTop => {
-    return Math.round(scrollTop / itemHeightRef.current);
-  };
   // 当selectedIndex变化时，调整滚动位置
   React.useEffect(() => {
     if (scrollViewRef.current && range.length > 0 && !isTouching) {
       const baseValue = selectedIndex * itemHeightRef.current;
-      setTargetScrollTopWithScale(setTargetScrollTop, baseValue);
+      setTargetScrollTopWithScale(setTargetScrollTop, baseValue, undefined, lengthScaleRatioRef.current);
       setCurrentIndex(selectedIndex);
     }
   }, [selectedIndex, range]);
@@ -213,7 +293,7 @@ function PickerGroupTime(props) {
     isCenterTimerId.current = setTimeout(() => {
       if (!scrollViewRef.current) return;
       const scrollTop = scrollViewRef.current.scrollTop;
-      const newIndex = getSelectedIndex(scrollTop);
+      const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
       setIsTouching(false);
       // 调用updateIndex执行限位逻辑，获取是否触发了限位
       const isLimited = Boolean(updateIndex(newIndex, columnId, true));
@@ -221,8 +301,9 @@ function PickerGroupTime(props) {
       if (!isLimited) {
         const baseValue = newIndex * itemHeightRef.current;
         const randomOffset = Math.random() * 0.001;
-        setTargetScrollTopWithScale(setTargetScrollTop, baseValue, randomOffset);
+        setTargetScrollTopWithScale(setTargetScrollTop, baseValue, randomOffset, lengthScaleRatioRef.current);
       }
+      isCenterTimerId.current = null;
     }, 100);
   };
   // 滚动处理
@@ -233,7 +314,7 @@ function PickerGroupTime(props) {
       isCenterTimerId.current = null;
     }
     const scrollTop = scrollViewRef.current.scrollTop;
-    const newIndex = getSelectedIndex(scrollTop);
+    const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
     if (newIndex !== currentIndex) {
       setCurrentIndex(newIndex);
     }
@@ -273,9 +354,11 @@ function PickerGroupTime(props) {
     get children() {
       return [createComponent(View, {
         className: "taro-picker__mask"
-      }), createComponent(View, {
+      }), createComponent(View, mergeProps({
         className: "taro-picker__indicator"
-      }), createComponent(ScrollView, {
+      }, indicatorStyle ? {
+        style: indicatorStyle
+      } : {})), createComponent(ScrollView, {
         ref: scrollViewRef,
         scrollY: true,
         showScrollbar: false,
@@ -302,29 +385,36 @@ function PickerGroupDate(props) {
     selectedIndex = 0,
     colors = {}
   } = props;
+  const indicatorStyle = colors.lineColor ? getIndicatorStyle(colors.lineColor) : null;
   const [targetScrollTop, setTargetScrollTop] = React.useState(0);
   const scrollViewRef = React.useRef(null);
   const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
   const [isTouching, setIsTouching] = React.useState(false);
+  const lengthScaleRatioRef = React.useRef(1);
+  const useMeasuredScaleRef = React.useRef(false);
   const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
+  // 初始化时计算 lengthScaleRatio 并判定缩放模式
   React.useEffect(() => {
-    var _a;
-    if (process.env.TARO_PLATFORM !== 'harmony') {
-      if (scrollViewRef.current && ((_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeigh)) {
-        itemHeightRef.current = scrollViewRef.current.scrollHeight / scrollViewRef.current.childNodes.length;
-      } else {
-        console.warn('Height measurement anomaly');
+    Taro.getSystemInfo({
+      success: res => {
+        lengthScaleRatioRef.current = calculateLengthScaleRatio(res);
+        useMeasuredScaleRef.current = resolveUseMeasuredScale(res);
+        itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+      },
+      fail: () => {
+        lengthScaleRatioRef.current = 1;
+        useMeasuredScaleRef.current = false;
       }
-    }
+    });
+  }, []);
+  React.useEffect(() => {
+    itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
   }, [range.length]); // 只在range长度变化时重新计算
-  const getSelectedIndex = scrollTop => {
-    return Math.round(scrollTop / itemHeightRef.current);
-  };
   // 当selectedIndex变化时，调整滚动位置
   React.useEffect(() => {
     if (scrollViewRef.current && range.length > 0 && !isTouching) {
       const baseValue = selectedIndex * itemHeightRef.current;
-      setTargetScrollTopWithScale(setTargetScrollTop, baseValue);
+      setTargetScrollTopWithScale(setTargetScrollTop, baseValue, undefined, lengthScaleRatioRef.current);
       setCurrentIndex(selectedIndex);
     }
   }, [selectedIndex, range]);
@@ -341,11 +431,11 @@ function PickerGroupDate(props) {
     isCenterTimerId.current = setTimeout(() => {
       if (!scrollViewRef.current) return;
       const scrollTop = scrollViewRef.current.scrollTop;
-      const newIndex = getSelectedIndex(scrollTop);
+      const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
       setIsTouching(false);
       const baseValue = newIndex * itemHeightRef.current;
       const randomOffset = Math.random() * 0.001; // 随机数为了在一个项内滚动时强制刷新
-      setTargetScrollTopWithScale(setTargetScrollTop, baseValue, randomOffset);
+      setTargetScrollTopWithScale(setTargetScrollTop, baseValue, randomOffset, lengthScaleRatioRef.current);
       // 更新日期值
       if (updateDay) {
         // 解析文本中的数字（移除年、月、日等后缀）
@@ -353,6 +443,7 @@ function PickerGroupDate(props) {
         const numericValue = parseInt(valueText.replace(/[^0-9]/g, ''));
         updateDay(isNaN(numericValue) ? 0 : numericValue, parseInt(columnId));
       }
+      isCenterTimerId.current = null;
     }, 100);
   };
   // 滚动处理
@@ -363,7 +454,7 @@ function PickerGroupDate(props) {
       isCenterTimerId.current = null;
     }
     const scrollTop = scrollViewRef.current.scrollTop;
-    const newIndex = getSelectedIndex(scrollTop);
+    const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
     if (newIndex !== currentIndex) {
       setCurrentIndex(newIndex);
     }
@@ -401,9 +492,11 @@ function PickerGroupDate(props) {
     get children() {
       return [createComponent(View, {
         className: "taro-picker__mask"
-      }), createComponent(View, {
+      }), createComponent(View, mergeProps({
         className: "taro-picker__indicator"
-      }), createComponent(ScrollView, {
+      }, indicatorStyle ? {
+        style: indicatorStyle
+      } : {})), createComponent(ScrollView, {
         ref: scrollViewRef,
         scrollY: true,
         showScrollbar: false,
@@ -432,30 +525,37 @@ function PickerGroupRegion(props) {
     // 使用selectedIndex参数，默认为0
     colors = {}
   } = props;
+  const indicatorStyle = colors.lineColor ? getIndicatorStyle(colors.lineColor) : null;
   const scrollViewRef = React.useRef(null);
   const [targetScrollTop, setTargetScrollTop] = React.useState(0);
   const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
   const [isTouching, setIsTouching] = React.useState(false);
+  const lengthScaleRatioRef = React.useRef(1);
+  const useMeasuredScaleRef = React.useRef(false);
   const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
   const isUserBeginScrollRef = React.useRef(false);
+  // 初始化时计算 lengthScaleRatio 并判定缩放模式
   React.useEffect(() => {
-    var _a;
-    if (process.env.TARO_PLATFORM !== 'harmony') {
-      if (scrollViewRef.current && ((_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeigh)) {
-        itemHeightRef.current = scrollViewRef.current.scrollHeight / scrollViewRef.current.childNodes.length;
-      } else {
-        console.warn('Height measurement anomaly');
+    Taro.getSystemInfo({
+      success: res => {
+        lengthScaleRatioRef.current = calculateLengthScaleRatio(res);
+        useMeasuredScaleRef.current = resolveUseMeasuredScale(res);
+        itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+      },
+      fail: () => {
+        lengthScaleRatioRef.current = 1;
+        useMeasuredScaleRef.current = false;
       }
-    }
+    });
+  }, []);
+  React.useEffect(() => {
+    itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
   }, [range.length]); // 只在range长度变化时重新计算
-  const getSelectedIndex = scrollTop => {
-    return Math.round(scrollTop / itemHeightRef.current);
-  };
   // 当selectedIndex变化时，调整滚动位置
   React.useEffect(() => {
     if (scrollViewRef.current && range.length > 0 && !isTouching) {
       const baseValue = selectedIndex * itemHeightRef.current;
-      setTargetScrollTopWithScale(setTargetScrollTop, baseValue);
+      setTargetScrollTopWithScale(setTargetScrollTop, baseValue, undefined, lengthScaleRatioRef.current);
       setCurrentIndex(selectedIndex);
     }
   }, [selectedIndex, range]);
@@ -471,11 +571,11 @@ function PickerGroupRegion(props) {
     isCenterTimerId.current = setTimeout(() => {
       if (!scrollViewRef.current) return;
       const scrollTop = scrollViewRef.current.scrollTop;
-      const newIndex = getSelectedIndex(scrollTop);
+      const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
       setIsTouching(false);
       const baseValue = newIndex * itemHeightRef.current;
       const randomOffset = Math.random() * 0.001; // 随机数为了在一个项内滚动时强制刷新
-      setTargetScrollTopWithScale(setTargetScrollTop, baseValue, randomOffset);
+      setTargetScrollTopWithScale(setTargetScrollTop, baseValue, randomOffset, lengthScaleRatioRef.current);
       updateIndex(newIndex, columnId, false, isUserBeginScrollRef.current);
     }, 100);
   };
@@ -487,7 +587,7 @@ function PickerGroupRegion(props) {
       isCenterTimerId.current = null;
     }
     const scrollTop = scrollViewRef.current.scrollTop;
-    const newIndex = getSelectedIndex(scrollTop);
+    const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
     if (newIndex !== currentIndex) {
       setCurrentIndex(newIndex);
     }
@@ -526,9 +626,11 @@ function PickerGroupRegion(props) {
     get children() {
       return [createComponent(View, {
         className: "taro-picker__mask"
-      }), createComponent(View, {
+      }), createComponent(View, mergeProps({
         className: "taro-picker__indicator"
-      }), createComponent(ScrollView, {
+      }, indicatorStyle ? {
+        style: indicatorStyle
+      } : {})), createComponent(ScrollView, {
         ref: scrollViewRef,
         scrollY: true,
         showScrollbar: false,