@tarojs/components-react 4.1.12-beta.40 → 4.1.12-beta.41

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

@@ -3,6 +3,31 @@ import { View, ScrollView } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import * as React from 'react';
 
+function requestAccessibilityFocusOnView(node) {
+  if (node == null) return;
+  const fn = Taro.setAccessibilityFocus;
+  if (typeof fn !== 'function') return;
+  fn({
+    viewRef: {
+      current: node
+    }
+  });
+}
+/** 部分端同 id 连续 scrollIntoView 不生效：先清空再在下一宏任务设回目标 id */
+function usePickerItemScrollIntoView() {
+  const [scrollIntoView, setScrollIntoView] = React.useState('');
+  const pulseRef = React.useRef(0);
+  const scrollToItemId = React.useCallback(itemId => {
+    pulseRef.current += 1;
+    const token = pulseRef.current;
+    setScrollIntoView('');
+    setTimeout(() => {
+      if (pulseRef.current !== token) return;
+      setScrollIntoView(itemId);
+    }, 0);
+  }, []);
+  return [scrollIntoView, scrollToItemId];
+}
 // 定义常量
 const PICKER_LINE_HEIGHT = 34; // px
 const PICKER_VISIBLE_ITEMS = 7; // 可见行数
@@ -157,16 +182,22 @@ function PickerGroupBasic(props) {
     onColumnChange,
     selectedIndex = 0,
     // 使用selectedIndex参数，默认为0
-    colors = {}
+    colors = {},
+    enableClickItemScroll = true
   } = props;
   const indicatorStyle = colors.lineColor ? getIndicatorStyle(colors.lineColor) : null;
   const [targetScrollTop, setTargetScrollTop] = React.useState(0);
+  const [scrollIntoView, scrollToItemId] = usePickerItemScrollIntoView();
   const scrollViewRef = React.useRef(null);
   const itemRefs = React.useRef([]);
+  const selectedIndexPropRef = React.useRef(selectedIndex);
+  selectedIndexPropRef.current = selectedIndex;
+  const syncScrollFromPropsRef = React.useRef(false);
+  const pendingScrollSettleFocusRef = React.useRef(false);
   // 使用selectedIndex初始化当前索引
   const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
   // 触摸状态用于优化用户体验
-  const [isTouching, setIsTouching] = React.useState(false);
+  const isTouchingRef = React.useRef(false);
   const lengthScaleRatioRef = React.useRef(1);
   const useMeasuredScaleRef = React.useRef(false);
   const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
@@ -187,29 +218,36 @@ function PickerGroupBasic(props) {
   React.useEffect(() => {
     itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
   }, [range.length]); // 只在range长度变化时重新计算
-  // 当selectedIndex变化时，调整滚动位置
+  // props 的 selectedIndex 变化：滚至对应项并短时标记程序化滚动（syncScrollFromPropsRef）
   React.useEffect(() => {
-    if (scrollViewRef.current && range.length > 0 && !isTouching) {
+    if (scrollViewRef.current && range.length > 0 && !isTouchingRef.current) {
+      syncScrollFromPropsRef.current = true;
       const baseValue = selectedIndex * itemHeightRef.current;
       setTargetScrollTopWithScale(setTargetScrollTop, baseValue, undefined, lengthScaleRatioRef.current);
       setCurrentIndex(selectedIndex);
+      const tid = setTimeout(() => {
+        syncScrollFromPropsRef.current = false;
+      }, 400);
+      return () => clearTimeout(tid);
     }
   }, [selectedIndex, range]);
   // 是否处于归中状态
   const isCenterTimerId = React.useRef(null);
-  // 简化为直接在滚动结束时通知父组件
+  // 滚动静止后归中并同步选中
   const handleScrollEnd = () => {
     if (!scrollViewRef.current) return;
     if (isCenterTimerId.current) {
       clearTimeout(isCenterTimerId.current);
       isCenterTimerId.current = null;
     }
-    // 做一个0.1s延时  0.1s之内没有新的滑动 则把选项归到中间 然后更新选中项
+    // 100ms 内无新滚动则归中并提交索引
     isCenterTimerId.current = setTimeout(() => {
       if (!scrollViewRef.current) return;
       const scrollTop = scrollViewRef.current.scrollTop;
       const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
-      setIsTouching(false);
+      const allowA11yFocus = !syncScrollFromPropsRef.current;
+      const shouldFocusOnScrollSettle = pendingScrollSettleFocusRef.current;
+      isTouchingRef.current = false;
       const baseValue = newIndex * itemHeightRef.current;
       const randomOffset = Math.random() * 0.001; // 随机数为了在一个项内滚动时强制刷新
       setTargetScrollTopWithScale(setTargetScrollTop, baseValue, randomOffset, lengthScaleRatioRef.current);
@@ -218,10 +256,15 @@ function PickerGroupBasic(props) {
         columnId,
         index: newIndex
       });
+      pendingScrollSettleFocusRef.current = false;
+      if (allowA11yFocus && shouldFocusOnScrollSettle) {
+        requestAccessibilityFocusOnView(itemRefs.current[newIndex]);
+      }
+      syncScrollFromPropsRef.current = false;
       isCenterTimerId.current = null;
     }, 100);
   };
-  // 滚动处理 - 在滚动时计算索引然后更新选中项样式
+  // 滚动中：按 scrollTop 更新高亮索引
   const handleScroll = () => {
     if (!scrollViewRef.current) return;
     if (isCenterTimerId.current) {
@@ -229,7 +272,17 @@ function PickerGroupBasic(props) {
       isCenterTimerId.current = null;
     }
     const scrollTop = scrollViewRef.current.scrollTop;
-    const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+    const ih = itemHeightRef.current;
+    const newIndex = getSelectedIndex(scrollTop, ih, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+    const spi = selectedIndexPropRef.current;
+    if (newIndex !== spi) {
+      if (!syncScrollFromPropsRef.current || isTouchingRef.current) {
+        pendingScrollSettleFocusRef.current = true;
+      }
+      if (isTouchingRef.current) {
+        syncScrollFromPropsRef.current = false;
+      }
+    }
     if (newIndex !== currentIndex) {
       setCurrentIndex(newIndex);
     }
@@ -237,11 +290,14 @@ function PickerGroupBasic(props) {
   // 渲染选项
   const pickerItem = range.map((item, index) => {
     const content = rangeKey && item && typeof item === 'object' ? item[rangeKey] : item;
-    return createComponent(View, {
+    return createComponent(View, mergeProps({
       id: `picker-item-${columnId}-${index}`,
       key: index,
       ref: el => itemRefs.current[index] = el,
-      className: `taro-picker__item${index === currentIndex ? ' taro-picker__item--selected' : ''}`,
+      className: `taro-picker__item${index === currentIndex ? ' taro-picker__item--selected' : ''}`
+    }, enableClickItemScroll ? {
+      onClick: () => scrollToItemId(`picker-item-${columnId}-${index}`)
+    } : {}, {
       get style() {
         return {
           height: PICKER_LINE_HEIGHT,
@@ -249,7 +305,7 @@ function PickerGroupBasic(props) {
         };
       },
       children: content
-    });
+    }));
   });
   const realPickerItems = [...new Array(PICKER_BLANK_ITEMS).fill(null).map((_, idx) => createComponent(View, {
     key: `blank-top-${idx}`,
@@ -264,6 +320,10 @@ function PickerGroupBasic(props) {
       height: PICKER_LINE_HEIGHT
     }
   }))];
+  const clickScrollViewProps = enableClickItemScroll ? {
+    scrollIntoView,
+    scrollIntoViewAlignment: 'center'
+  } : {};
   return createComponent(View, {
     className: "taro-picker__group",
     get children() {
@@ -273,7 +333,7 @@ function PickerGroupBasic(props) {
         className: "taro-picker__indicator"
       }, indicatorStyle ? {
         style: indicatorStyle
-      } : {})), createComponent(ScrollView, {
+      } : {})), createComponent(ScrollView, mergeProps({
         ref: scrollViewRef,
         scrollY: true,
         showScrollbar: false,
@@ -281,13 +341,16 @@ function PickerGroupBasic(props) {
         style: {
           height: PICKER_LINE_HEIGHT * PICKER_VISIBLE_ITEMS
         },
-        scrollTop: targetScrollTop,
+        scrollTop: targetScrollTop
+      }, clickScrollViewProps, {
         onScroll: handleScroll,
-        onTouchStart: () => setIsTouching(true),
+        onTouchStart: () => {
+          isTouchingRef.current = true;
+        },
         onScrollEnd: handleScrollEnd,
         scrollWithAnimation: true,
         children: realPickerItems
-      })];
+      }))];
     }
   });
 }
@@ -299,17 +362,75 @@ function PickerGroupTime(props) {
     columnId,
     updateIndex,
     selectedIndex = 0,
-    colors = {}
+    colors = {},
+    timeA11yLimitFocus,
+    onTimeA11yLimitFocusConsumed,
+    timeA11yLimitEventNonce,
+    enableClickItemScroll = true
   } = props;
   const indicatorStyle = colors.lineColor ? getIndicatorStyle(colors.lineColor) : null;
   const [targetScrollTop, setTargetScrollTop] = React.useState(0);
+  const [scrollIntoView, scrollToItemId] = usePickerItemScrollIntoView();
   const scrollViewRef = React.useRef(null);
   const itemRefs = React.useRef([]);
+  const selectedIndexPropRef = React.useRef(selectedIndex);
+  selectedIndexPropRef.current = selectedIndex;
+  const syncScrollFromPropsRef = React.useRef(false);
+  const prevLimitEventNonceRef = React.useRef(undefined);
+  const suppressScrollSettleFocusNonceRef = React.useRef(null);
+  const pendingScrollSettleFocusRef = React.useRef(false);
+  const pendingLimitFocusRef = React.useRef(null);
+  const limitFocusTimerRef = React.useRef(null);
   const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
-  const [isTouching, setIsTouching] = React.useState(false);
+  const isTouchingRef = React.useRef(false);
   const lengthScaleRatioRef = React.useRef(1);
   const useMeasuredScaleRef = React.useRef(false);
   const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
+  const clearLimitFocusTimer = React.useCallback(() => {
+    if (limitFocusTimerRef.current) {
+      clearTimeout(limitFocusTimerRef.current);
+      limitFocusTimerRef.current = null;
+    }
+  }, []);
+  const tryFocusPendingLimit = React.useCallback(() => {
+    const pending = pendingLimitFocusRef.current;
+    const scrollView = scrollViewRef.current;
+    if (!pending || !scrollView) return;
+    const visualIndex = getSelectedIndex(scrollView.scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+    const isStable = visualIndex === pending.index;
+    if (!isStable) {
+      if (pending.attempts >= 20) {
+        pendingLimitFocusRef.current = null;
+        if (suppressScrollSettleFocusNonceRef.current === pending.nonce) {
+          suppressScrollSettleFocusNonceRef.current = null;
+        }
+        onTimeA11yLimitFocusConsumed === null || onTimeA11yLimitFocusConsumed === void 0 ? void 0 : onTimeA11yLimitFocusConsumed();
+        return;
+      }
+      pending.attempts += 1;
+      clearLimitFocusTimer();
+      limitFocusTimerRef.current = setTimeout(() => {
+        tryFocusPendingLimit();
+      }, 50);
+      return;
+    }
+    const node = itemRefs.current[pending.index];
+    pendingLimitFocusRef.current = null;
+    if (suppressScrollSettleFocusNonceRef.current === pending.nonce) {
+      suppressScrollSettleFocusNonceRef.current = null;
+    }
+    clearLimitFocusTimer();
+    requestAccessibilityFocusOnView(node);
+    onTimeA11yLimitFocusConsumed === null || onTimeA11yLimitFocusConsumed === void 0 ? void 0 : onTimeA11yLimitFocusConsumed();
+  }, [clearLimitFocusTimer, onTimeA11yLimitFocusConsumed]);
+  const schedulePendingLimitFocus = React.useCallback(() => {
+    if (!pendingLimitFocusRef.current) return;
+    clearLimitFocusTimer();
+    limitFocusTimerRef.current = setTimeout(() => {
+      tryFocusPendingLimit();
+    }, 100);
+  }, [clearLimitFocusTimer, tryFocusPendingLimit]);
+  React.useEffect(() => clearLimitFocusTimer, [clearLimitFocusTimer]);
   // 初始化时计算 lengthScaleRatio 并判定缩放模式
   React.useEffect(() => {
     Taro.getSystemInfo({
@@ -327,41 +448,103 @@ function PickerGroupTime(props) {
   React.useEffect(() => {
     itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
   }, [range.length]); // 只在range长度变化时重新计算
-  // 当selectedIndex变化时，调整滚动位置
+  // props 的 selectedIndex 变化：滚至对应项并短时标记程序化滚动（syncScrollFromPropsRef）
   React.useEffect(() => {
-    if (scrollViewRef.current && range.length > 0 && !isTouching) {
+    if (scrollViewRef.current && range.length > 0 && !isTouchingRef.current) {
+      syncScrollFromPropsRef.current = true;
       const baseValue = selectedIndex * itemHeightRef.current;
       setTargetScrollTopWithScale(setTargetScrollTop, baseValue, undefined, lengthScaleRatioRef.current);
       setCurrentIndex(selectedIndex);
+      const tid = setTimeout(() => {
+        syncScrollFromPropsRef.current = false;
+      }, 400);
+      return () => clearTimeout(tid);
     }
   }, [selectedIndex, range]);
+  // time 限位 nonce 变更：强制对齐 scrollTop（避免 remount 打断读屏焦点）
+  React.useEffect(() => {
+    if (!timeA11yLimitEventNonce) return;
+    if (!scrollViewRef.current || range.length === 0 || isTouchingRef.current) return;
+    syncScrollFromPropsRef.current = true;
+    const baseValue = selectedIndex * itemHeightRef.current;
+    setTargetScrollTopWithScale(setTargetScrollTop, baseValue, Math.random() * 0.001, lengthScaleRatioRef.current);
+    setCurrentIndex(selectedIndex);
+    const tid = setTimeout(() => {
+      syncScrollFromPropsRef.current = false;
+    }, 400);
+    return () => clearTimeout(tid);
+  }, [timeA11yLimitEventNonce]); // 仅依赖 nonce，其余用 ref
+  React.useLayoutEffect(() => {
+    if (timeA11yLimitEventNonce === undefined) return;
+    const prev = prevLimitEventNonceRef.current;
+    prevLimitEventNonceRef.current = timeA11yLimitEventNonce;
+    if (timeA11yLimitEventNonce > 0 && (prev === undefined || timeA11yLimitEventNonce > prev)) {
+      suppressScrollSettleFocusNonceRef.current = timeA11yLimitEventNonce;
+    }
+  }, [timeA11yLimitEventNonce]);
+  // 限位后登记本列待聚焦项，稳定后再 requestAccessibilityFocus
+  React.useEffect(() => {
+    const req = timeA11yLimitFocus;
+    if (!req || req.columnId !== columnId) return;
+    const idx = selectedIndex;
+    const nonce = req.nonce;
+    pendingScrollSettleFocusRef.current = false;
+    pendingLimitFocusRef.current = {
+      index: idx,
+      nonce,
+      attempts: 0
+    };
+    schedulePendingLimitFocus();
+  }, [timeA11yLimitFocus, columnId, selectedIndex, schedulePendingLimitFocus]);
   // 是否处于归中状态
   const isCenterTimerId = React.useRef(null);
-  // 简化为直接在滚动结束时通知父组件
+  // 滚动静止后归中并同步选中
   const handleScrollEnd = () => {
     if (!scrollViewRef.current) return;
     if (isCenterTimerId.current) {
       clearTimeout(isCenterTimerId.current);
       isCenterTimerId.current = null;
     }
-    // 做一个0.1s延时  0.1s之内没有新的滑动 则把选项归到中间 然后更新选中项
+    // 100ms 内无新滚动则归中并提交索引
     isCenterTimerId.current = setTimeout(() => {
       if (!scrollViewRef.current) return;
       const scrollTop = scrollViewRef.current.scrollTop;
       const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
-      setIsTouching(false);
-      // 调用updateIndex执行限位逻辑，获取是否触发了限位
+      const allowA11yFocus = !syncScrollFromPropsRef.current;
+      const shouldFocusOnScrollSettle = pendingScrollSettleFocusRef.current;
+      isTouchingRef.current = false;
       const isLimited = Boolean(updateIndex(newIndex, columnId, true));
-      // 如果没有触发限位，才执行归中逻辑
+      const hasPendingLimitFocus = pendingLimitFocusRef.current != null;
+      if (isLimited) {
+        pendingScrollSettleFocusRef.current = false;
+      }
       if (!isLimited) {
         const baseValue = newIndex * itemHeightRef.current;
         const randomOffset = Math.random() * 0.001;
         setTargetScrollTopWithScale(setTargetScrollTop, baseValue, randomOffset, lengthScaleRatioRef.current);
       }
+      if (!isLimited && hasPendingLimitFocus) {
+        pendingScrollSettleFocusRef.current = false;
+        schedulePendingLimitFocus();
+        syncScrollFromPropsRef.current = false;
+        isCenterTimerId.current = null;
+        return;
+      }
+      if (!isLimited && pendingLimitFocusRef.current == null && suppressScrollSettleFocusNonceRef.current != null) {
+        suppressScrollSettleFocusNonceRef.current = null;
+      }
+      const suppressByLimitNonce = suppressScrollSettleFocusNonceRef.current != null;
+      if (!isLimited && allowA11yFocus && shouldFocusOnScrollSettle) {
+        pendingScrollSettleFocusRef.current = false;
+        if (!suppressByLimitNonce) {
+          requestAccessibilityFocusOnView(itemRefs.current[newIndex]);
+        }
+      }
+      syncScrollFromPropsRef.current = false;
       isCenterTimerId.current = null;
     }, 100);
   };
-  // 滚动处理
+  // 滚动中：按 scrollTop 更新高亮索引
   const handleScroll = () => {
     if (!scrollViewRef.current) return;
     if (isCenterTimerId.current) {
@@ -369,19 +552,35 @@ function PickerGroupTime(props) {
       isCenterTimerId.current = null;
     }
     const scrollTop = scrollViewRef.current.scrollTop;
-    const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+    const ih = itemHeightRef.current;
+    const newIndex = getSelectedIndex(scrollTop, ih, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+    const spi = selectedIndexPropRef.current;
+    if (newIndex !== spi) {
+      if (!syncScrollFromPropsRef.current || isTouchingRef.current) {
+        pendingScrollSettleFocusRef.current = true;
+      }
+      if (isTouchingRef.current) {
+        syncScrollFromPropsRef.current = false;
+      }
+    }
     if (newIndex !== currentIndex) {
       setCurrentIndex(newIndex);
     }
+    if (pendingLimitFocusRef.current) {
+      schedulePendingLimitFocus();
+    }
   };
   // 渲染选项
   const pickerItem = range.map((item, index) => {
     const content = rangeKey && item && typeof item === 'object' ? item[rangeKey] : item;
-    return createComponent(View, {
+    return createComponent(View, mergeProps({
       id: `picker-item-${columnId}-${index}`,
       key: index,
       ref: el => itemRefs.current[index] = el,
-      className: `taro-picker__item${index === currentIndex ? ' taro-picker__item--selected' : ''}`,
+      className: `taro-picker__item${index === currentIndex ? ' taro-picker__item--selected' : ''}`
+    }, enableClickItemScroll ? {
+      onClick: () => scrollToItemId(`picker-item-${columnId}-${index}`)
+    } : {}, {
       get style() {
         return {
           height: PICKER_LINE_HEIGHT,
@@ -389,7 +588,7 @@ function PickerGroupTime(props) {
         };
       },
       children: content
-    });
+    }));
   });
   const realPickerItems = [...new Array(PICKER_BLANK_ITEMS).fill(null).map((_, idx) => createComponent(View, {
     key: `blank-top-${idx}`,
@@ -404,6 +603,10 @@ function PickerGroupTime(props) {
       height: PICKER_LINE_HEIGHT
     }
   }))];
+  const clickScrollViewProps = enableClickItemScroll ? {
+    scrollIntoView,
+    scrollIntoViewAlignment: 'center'
+  } : {};
   return createComponent(View, {
     className: "taro-picker__group",
     get children() {
@@ -413,7 +616,7 @@ function PickerGroupTime(props) {
         className: "taro-picker__indicator"
       }, indicatorStyle ? {
         style: indicatorStyle
-      } : {})), createComponent(ScrollView, {
+      } : {})), createComponent(ScrollView, mergeProps({
         ref: scrollViewRef,
         scrollY: true,
         showScrollbar: false,
@@ -421,13 +624,16 @@ function PickerGroupTime(props) {
         style: {
           height: PICKER_LINE_HEIGHT * PICKER_VISIBLE_ITEMS
         },
-        scrollTop: targetScrollTop,
+        scrollTop: targetScrollTop
+      }, clickScrollViewProps, {
         onScroll: handleScroll,
-        onTouchStart: () => setIsTouching(true),
+        onTouchStart: () => {
+          isTouchingRef.current = true;
+        },
         onScrollEnd: handleScrollEnd,
         scrollWithAnimation: true,
         children: realPickerItems
-      })];
+      }))];
     }
   });
 }
@@ -438,13 +644,20 @@ function PickerGroupDate(props) {
     columnId,
     updateDay,
     selectedIndex = 0,
-    colors = {}
+    colors = {},
+    enableClickItemScroll = true
   } = props;
   const indicatorStyle = colors.lineColor ? getIndicatorStyle(colors.lineColor) : null;
   const [targetScrollTop, setTargetScrollTop] = React.useState(0);
+  const [scrollIntoView, scrollToItemId] = usePickerItemScrollIntoView();
   const scrollViewRef = React.useRef(null);
+  const itemRefs = React.useRef([]);
+  const selectedIndexPropRef = React.useRef(selectedIndex);
+  selectedIndexPropRef.current = selectedIndex;
+  const syncScrollFromPropsRef = React.useRef(false);
+  const pendingScrollSettleFocusRef = React.useRef(false);
   const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
-  const [isTouching, setIsTouching] = React.useState(false);
+  const isTouchingRef = React.useRef(false);
   const lengthScaleRatioRef = React.useRef(1);
   const useMeasuredScaleRef = React.useRef(false);
   const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
@@ -465,29 +678,36 @@ function PickerGroupDate(props) {
   React.useEffect(() => {
     itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
   }, [range.length]); // 只在range长度变化时重新计算
-  // 当selectedIndex变化时，调整滚动位置
+  // props 的 selectedIndex 变化：滚至对应项并短时标记程序化滚动（syncScrollFromPropsRef）
   React.useEffect(() => {
-    if (scrollViewRef.current && range.length > 0 && !isTouching) {
+    if (scrollViewRef.current && range.length > 0 && !isTouchingRef.current) {
+      syncScrollFromPropsRef.current = true;
       const baseValue = selectedIndex * itemHeightRef.current;
       setTargetScrollTopWithScale(setTargetScrollTop, baseValue, undefined, lengthScaleRatioRef.current);
       setCurrentIndex(selectedIndex);
+      const tid = setTimeout(() => {
+        syncScrollFromPropsRef.current = false;
+      }, 400);
+      return () => clearTimeout(tid);
     }
   }, [selectedIndex, range]);
   // 是否处于归中状态
   const isCenterTimerId = React.useRef(null);
-  // 简化为直接在滚动结束时通知父组件
+  // 滚动静止后归中并同步选中
   const handleScrollEnd = () => {
     if (!scrollViewRef.current) return;
     if (isCenterTimerId.current) {
       clearTimeout(isCenterTimerId.current);
       isCenterTimerId.current = null;
     }
-    // 做一个0.1s延时  0.1s之内没有新的滑动 则把选项归到中间 然后更新选中项
+    // 100ms 内无新滚动则归中并提交索引
     isCenterTimerId.current = setTimeout(() => {
       if (!scrollViewRef.current) return;
       const scrollTop = scrollViewRef.current.scrollTop;
       const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
-      setIsTouching(false);
+      const allowA11yFocus = !syncScrollFromPropsRef.current;
+      const shouldFocusOnScrollSettle = pendingScrollSettleFocusRef.current;
+      isTouchingRef.current = false;
       const baseValue = newIndex * itemHeightRef.current;
       const randomOffset = Math.random() * 0.001; // 随机数为了在一个项内滚动时强制刷新
       setTargetScrollTopWithScale(setTargetScrollTop, baseValue, randomOffset, lengthScaleRatioRef.current);
@@ -498,10 +718,15 @@ function PickerGroupDate(props) {
         const numericValue = parseInt(valueText.replace(/[^0-9]/g, ''));
         updateDay(isNaN(numericValue) ? 0 : numericValue, parseInt(columnId));
       }
+      pendingScrollSettleFocusRef.current = false;
+      if (allowA11yFocus && shouldFocusOnScrollSettle) {
+        requestAccessibilityFocusOnView(itemRefs.current[newIndex]);
+      }
+      syncScrollFromPropsRef.current = false;
       isCenterTimerId.current = null;
     }, 100);
   };
-  // 滚动处理
+  // 滚动中：按 scrollTop 更新高亮索引
   const handleScroll = () => {
     if (!scrollViewRef.current) return;
     if (isCenterTimerId.current) {
@@ -509,17 +734,31 @@ function PickerGroupDate(props) {
       isCenterTimerId.current = null;
     }
     const scrollTop = scrollViewRef.current.scrollTop;
-    const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+    const ih = itemHeightRef.current;
+    const newIndex = getSelectedIndex(scrollTop, ih, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+    const spi = selectedIndexPropRef.current;
+    if (newIndex !== spi) {
+      if (!syncScrollFromPropsRef.current || isTouchingRef.current) {
+        pendingScrollSettleFocusRef.current = true;
+      }
+      if (isTouchingRef.current) {
+        syncScrollFromPropsRef.current = false;
+      }
+    }
     if (newIndex !== currentIndex) {
       setCurrentIndex(newIndex);
     }
   };
   // 渲染选项
   const pickerItem = range.map((item, index) => {
-    return createComponent(View, {
+    return createComponent(View, mergeProps({
       id: `picker-item-${columnId}-${index}`,
       key: index,
-      className: `taro-picker__item${index === currentIndex ? ' taro-picker__item--selected' : ''}`,
+      ref: el => itemRefs.current[index] = el,
+      className: `taro-picker__item${index === currentIndex ? ' taro-picker__item--selected' : ''}`
+    }, enableClickItemScroll ? {
+      onClick: () => scrollToItemId(`picker-item-${columnId}-${index}`)
+    } : {}, {
       get style() {
         return {
           height: PICKER_LINE_HEIGHT,
@@ -527,7 +766,7 @@ function PickerGroupDate(props) {
         };
       },
       children: item
-    });
+    }));
   });
   const realPickerItems = [...new Array(PICKER_BLANK_ITEMS).fill(null).map((_, idx) => createComponent(View, {
     key: `blank-top-${idx}`,
@@ -542,6 +781,10 @@ function PickerGroupDate(props) {
       height: PICKER_LINE_HEIGHT
     }
   }))];
+  const clickScrollViewProps = enableClickItemScroll ? {
+    scrollIntoView,
+    scrollIntoViewAlignment: 'center'
+  } : {};
   return createComponent(View, {
     className: "taro-picker__group",
     get children() {
@@ -551,7 +794,7 @@ function PickerGroupDate(props) {
         className: "taro-picker__indicator"
       }, indicatorStyle ? {
         style: indicatorStyle
-      } : {})), createComponent(ScrollView, {
+      } : {})), createComponent(ScrollView, mergeProps({
         ref: scrollViewRef,
         scrollY: true,
         showScrollbar: false,
@@ -559,13 +802,16 @@ function PickerGroupDate(props) {
         style: {
           height: PICKER_LINE_HEIGHT * PICKER_VISIBLE_ITEMS
         },
-        scrollTop: targetScrollTop,
+        scrollTop: targetScrollTop
+      }, clickScrollViewProps, {
         onScroll: handleScroll,
-        onTouchStart: () => setIsTouching(true),
+        onTouchStart: () => {
+          isTouchingRef.current = true;
+        },
         onScrollEnd: handleScrollEnd,
         scrollWithAnimation: true,
         children: realPickerItems
-      })];
+      }))];
     }
   });
 }
@@ -578,17 +824,23 @@ function PickerGroupRegion(props) {
     updateIndex,
     selectedIndex = 0,
     // 使用selectedIndex参数，默认为0
-    colors = {}
+    colors = {},
+    enableClickItemScroll = true
   } = props;
   const indicatorStyle = colors.lineColor ? getIndicatorStyle(colors.lineColor) : null;
   const scrollViewRef = React.useRef(null);
   const [targetScrollTop, setTargetScrollTop] = React.useState(0);
+  const [scrollIntoView, scrollToItemId] = usePickerItemScrollIntoView();
   const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
-  const [isTouching, setIsTouching] = React.useState(false);
+  const isTouchingRef = React.useRef(false);
   const lengthScaleRatioRef = React.useRef(1);
   const useMeasuredScaleRef = React.useRef(false);
   const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
-  const isUserBeginScrollRef = React.useRef(false);
+  const itemRefs = React.useRef([]);
+  const selectedIndexPropRef = React.useRef(selectedIndex);
+  selectedIndexPropRef.current = selectedIndex;
+  const syncScrollFromPropsRef = React.useRef(false);
+  const pendingScrollSettleFocusRef = React.useRef(false);
   // 初始化时计算 lengthScaleRatio 并判定缩放模式
   React.useEffect(() => {
     Taro.getSystemInfo({
@@ -606,15 +858,20 @@ function PickerGroupRegion(props) {
   React.useEffect(() => {
     itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
   }, [range.length]); // 只在range长度变化时重新计算
-  // 当selectedIndex变化时，调整滚动位置
+  // props 的 selectedIndex 变化：滚至对应项并短时标记程序化滚动（syncScrollFromPropsRef）
   React.useEffect(() => {
-    if (scrollViewRef.current && range.length > 0 && !isTouching) {
+    if (scrollViewRef.current && range.length > 0 && !isTouchingRef.current) {
+      syncScrollFromPropsRef.current = true;
       const baseValue = selectedIndex * itemHeightRef.current;
       setTargetScrollTopWithScale(setTargetScrollTop, baseValue, undefined, lengthScaleRatioRef.current);
       setCurrentIndex(selectedIndex);
+      const tid = setTimeout(() => {
+        syncScrollFromPropsRef.current = false;
+      }, 400);
+      return () => clearTimeout(tid);
     }
   }, [selectedIndex, range]);
-  // 滚动结束处理
+  // 滚动静止后归中（debounce）
   const isCenterTimerId = React.useRef(null);
   const handleScrollEnd = () => {
     if (!scrollViewRef.current) return;
@@ -622,19 +879,27 @@ function PickerGroupRegion(props) {
       clearTimeout(isCenterTimerId.current);
       isCenterTimerId.current = null;
     }
-    // 做一个0.1s延时  0.1s之内没有新的滑动 则把选项归到中间 然后更新选中项
+    // 100ms 内无新滚动则归中并提交索引
     isCenterTimerId.current = setTimeout(() => {
       if (!scrollViewRef.current) return;
       const scrollTop = scrollViewRef.current.scrollTop;
       const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
-      setIsTouching(false);
+      const allowA11yFocus = !syncScrollFromPropsRef.current;
+      const shouldFocusOnScrollSettle = pendingScrollSettleFocusRef.current;
+      isTouchingRef.current = false;
       const baseValue = newIndex * itemHeightRef.current;
       const randomOffset = Math.random() * 0.001; // 随机数为了在一个项内滚动时强制刷新
       setTargetScrollTopWithScale(setTargetScrollTop, baseValue, randomOffset, lengthScaleRatioRef.current);
-      updateIndex(newIndex, columnId, false, isUserBeginScrollRef.current);
+      updateIndex(newIndex, columnId, false, allowA11yFocus);
+      pendingScrollSettleFocusRef.current = false;
+      if (allowA11yFocus && shouldFocusOnScrollSettle) {
+        requestAccessibilityFocusOnView(itemRefs.current[newIndex]);
+      }
+      syncScrollFromPropsRef.current = false;
+      isCenterTimerId.current = null;
     }, 100);
   };
-  // 滚动处理 - 在滚动时计算索引
+  // 滚动中：按 scrollTop 更新高亮索引
   const handleScroll = () => {
     if (!scrollViewRef.current) return;
     if (isCenterTimerId.current) {
@@ -642,7 +907,17 @@ function PickerGroupRegion(props) {
       isCenterTimerId.current = null;
     }
     const scrollTop = scrollViewRef.current.scrollTop;
-    const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+    const ih = itemHeightRef.current;
+    const newIndex = getSelectedIndex(scrollTop, ih, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
+    const spi = selectedIndexPropRef.current;
+    if (newIndex !== spi) {
+      if (!syncScrollFromPropsRef.current || isTouchingRef.current) {
+        pendingScrollSettleFocusRef.current = true;
+      }
+      if (isTouchingRef.current) {
+        syncScrollFromPropsRef.current = false;
+      }
+    }
     if (newIndex !== currentIndex) {
       setCurrentIndex(newIndex);
     }
@@ -650,10 +925,14 @@ function PickerGroupRegion(props) {
   // 渲染选项
   const pickerItem = range.map((item, index) => {
     const content = rangeKey && item && typeof item === 'object' ? item[rangeKey] : item;
-    return createComponent(View, {
+    return createComponent(View, mergeProps({
       id: `picker-item-${columnId}-${index}`,
       key: index,
-      className: `taro-picker__item${index === currentIndex ? ' taro-picker__item--selected' : ''}`,
+      ref: el => itemRefs.current[index] = el,
+      className: `taro-picker__item${index === currentIndex ? ' taro-picker__item--selected' : ''}`
+    }, enableClickItemScroll ? {
+      onClick: () => scrollToItemId(`picker-item-${columnId}-${index}`)
+    } : {}, {
       get style() {
         return {
           height: PICKER_LINE_HEIGHT,
@@ -661,7 +940,7 @@ function PickerGroupRegion(props) {
         };
       },
       children: content
-    });
+    }));
   });
   const realPickerItems = [...new Array(PICKER_BLANK_ITEMS).fill(null).map((_, idx) => createComponent(View, {
     key: `blank-top-${idx}`,
@@ -676,6 +955,10 @@ function PickerGroupRegion(props) {
       height: PICKER_LINE_HEIGHT
     }
   }))];
+  const clickScrollViewProps = enableClickItemScroll ? {
+    scrollIntoView,
+    scrollIntoViewAlignment: 'center'
+  } : {};
   return createComponent(View, {
     className: "taro-picker__group",
     get children() {
@@ -685,7 +968,7 @@ function PickerGroupRegion(props) {
         className: "taro-picker__indicator"
       }, indicatorStyle ? {
         style: indicatorStyle
-      } : {})), createComponent(ScrollView, {
+      } : {})), createComponent(ScrollView, mergeProps({
         ref: scrollViewRef,
         scrollY: true,
         showScrollbar: false,
@@ -693,16 +976,16 @@ function PickerGroupRegion(props) {
         style: {
           height: PICKER_LINE_HEIGHT * PICKER_VISIBLE_ITEMS
         },
-        scrollTop: targetScrollTop,
+        scrollTop: targetScrollTop
+      }, clickScrollViewProps, {
         onScroll: handleScroll,
         onTouchStart: () => {
-          setIsTouching(true);
-          isUserBeginScrollRef.current = true;
+          isTouchingRef.current = true;
         },
         onScrollEnd: handleScrollEnd,
         scrollWithAnimation: true,
         children: realPickerItems
-      })];
+      }))];
     }
   });
 }