@tarojs/components-advanced 4.2.1-beta.2 → 4.2.1

package/dist/components/water-flow/flow-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow-section.js","sources":["../../../src/components/water-flow/flow-section.ts"],"sourcesContent":["import { View } from '@tarojs/components'\nimport {\n  type CSSProperties,\n  type PropsWithChildren,\n  Children,\n  createElement,\n  useMemo,\n} from 'react'\n\nimport { FlowItemContainer } from './flow-item'\nimport { Section } from './section'\nimport { useObservedAttr } from './use-observed-attr'\n\nimport type { FlowSectionProps } from './interface'\n\nexport interface _FlowSectionProps extends FlowSectionProps {\n  section: Section\n}\n\nexport function FlowSection({\n  children,\n  ...props\n}: PropsWithChildren<FlowSectionProps>) {\n  const {\n    id,\n    className,\n    style,\n    section,\n    rowGap = 0,\n    columnGap = 0,\n  } = props as _FlowSectionProps\n  const layouted$ = useObservedAttr(section, 'layouted')\n  const height$ = useObservedAttr(section, 'height')\n  const renderRange$ = useObservedAttr(section, 'renderRange')\n  const scrollTop$ = useObservedAttr(section, 'scrollTop')\n\n  const sectionStyle: CSSProperties = useMemo(() => {\n    const baseStyle: CSSProperties = {\n      display: 'flex',\n      flexDirection: 'row',\n      width: '100%',\n      height: height$,\n      gap: columnGap,\n      visibility: layouted$ ? 'visible' : 'hidden',\n      ...style,\n    }\n\n    if (!layouted$) {\n      return baseStyle\n    }\n\n    return {\n      ...baseStyle,\n      position: 'absolute',\n      top: 0,\n      transform: `translate3d(0px, ${scrollTop$}px, 0px)`,\n      left: 0,\n    }\n  }, [height$, style, layouted$, scrollTop$, columnGap])\n\n  const columns = useMemo(() => {\n    const childNodes = Children.toArray(children)\n    const columnStyle: CSSProperties = {\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: rowGap,\n      flex: 1,\n    }\n    /** 已经完成布局计算，使用虚拟滚动 */\n    if (layouted$) {\n      return renderRange$.map(([startIndex, endIndex], colIndex) => {\n        const columnId = `col-${colIndex}`\n        return createElement(\n          View,\n          {\n            style: columnStyle,\n            id: columnId,\n            key: columnId,\n          },\n          section.columnMap[colIndex]\n            .slice(startIndex, endIndex + 1)\n            .map((node) => {\n              const childNode = childNodes[node.childIndex]\n              const columnProps: any = {\n                node,\n                key: node.id,\n              }\n              return createElement(FlowItemContainer, columnProps, childNode)\n            })\n        )\n      })\n    }\n\n    return section.columnMap.map((column, colIndex) => {\n      const columnId = `col-${colIndex}`\n      return createElement(\n        View,\n        { style: columnStyle, id: columnId, key: columnId },\n        column.map((node) => {\n          const childNode = childNodes[node.childIndex]\n          const columnProps: any = {\n            node,\n            key: node.id,\n          }\n          return createElement(FlowItemContainer, columnProps, childNode)\n        })\n      )\n    })\n  }, [children, layouted$, section.columnMap, renderRange$])\n\n  return createElement(\n    View,\n    { style: sectionStyle, className, id: id ?? section.id },\n    columns\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"flow-section.js","sources":["../../../src/components/water-flow/flow-section.ts"],"sourcesContent":["import { View } from '@tarojs/components'\nimport {\n  type CSSProperties,\n  type PropsWithChildren,\n  Children,\n  createElement,\n  useMemo,\n} from 'react'\n\nimport { FlowItemContainer } from './flow-item'\nimport { Section } from './section'\nimport { useObservedAttr } from './use-observed-attr'\n\nimport type { FlowSectionProps } from './interface'\n\nexport interface _FlowSectionProps extends FlowSectionProps {\n  section: Section\n}\n\nexport function FlowSection({\n  children,\n  ...props\n}: PropsWithChildren<FlowSectionProps>) {\n  const {\n    id,\n    className,\n    style,\n    section,\n    rowGap = 0,\n    columnGap = 0,\n  } = props as _FlowSectionProps\n  const layouted$ = useObservedAttr(section, 'layouted')\n  const height$ = useObservedAttr(section, 'height')\n  const renderRange$ = useObservedAttr(section, 'renderRange')\n  const scrollTop$ = useObservedAttr(section, 'scrollTop')\n\n  const sectionStyle: CSSProperties = useMemo(() => {\n    const baseStyle: CSSProperties = {\n      display: 'flex',\n      flexDirection: 'row',\n      width: '100%',\n      height: height$,\n      gap: columnGap,\n      visibility: layouted$ ? 'visible' : 'hidden',\n      ...style,\n    }\n\n    if (!layouted$) {\n      return baseStyle\n    }\n\n    return {\n      ...baseStyle,\n      position: 'absolute',\n      top: 0,\n      transform: `translate3d(0px, ${scrollTop$}px, 0px)`,\n      left: 0,\n    }\n  }, [height$, style, layouted$, scrollTop$, columnGap])\n\n  const columns = useMemo(() => {\n    const childNodes = Children.toArray(children)\n    const columnStyle: CSSProperties = {\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: rowGap,\n      flex: 1,\n    }\n    /** 已经完成布局计算，使用虚拟滚动 */\n    if (layouted$) {\n      return renderRange$.map(([startIndex, endIndex], colIndex) => {\n        const columnId = `col-${colIndex}`\n        return createElement(\n          View,\n          {\n            style: columnStyle,\n            id: columnId,\n            key: columnId,\n          },\n          section.columnMap[colIndex]\n            .slice(startIndex, endIndex + 1)\n            .map((node) => {\n              const childNode = childNodes[node.childIndex]\n              const columnProps: any = {\n                node,\n                key: node.id,\n              }\n              return createElement(FlowItemContainer, columnProps, childNode)\n            })\n        )\n      })\n    }\n\n    return section.columnMap.map((column, colIndex) => {\n      const columnId = `col-${colIndex}`\n      return createElement(\n        View,\n        { style: columnStyle, id: columnId, key: columnId },\n        column.map((node) => {\n          const childNode = childNodes[node.childIndex]\n          const columnProps: any = {\n            node,\n            key: node.id,\n          }\n          return createElement(FlowItemContainer, columnProps, childNode)\n        })\n      )\n    })\n  }, [children, layouted$, section.columnMap, renderRange$, id])\n\n  return createElement(\n    View,\n    { style: sectionStyle, className, id: id ?? section.id },\n    columns\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/water-flow/index.d.ts

@@ -1,4 +1,4 @@
 export { FlowItem, useFlowItemPositioner } from './flow-item';
 export { FlowSection } from './flow-section';
-export type { FlowSectionProps, WaterFlowProps, WaterFlowRef } from './interface';
+export type { FlowSectionProps, WaterFlowProps } from './interface';
 export { WaterFlow } from './water-flow';

package/dist/components/water-flow/interface.d.ts

@@ -1,12 +1,12 @@
 import { ScrollViewProps } from '@tarojs/components';
 import { Node } from './node';
-import type { CSSProperties, RefObject } from 'react';
+import type { CSSProperties } from 'react';
 export interface BaseProps {
     id?: string;
     className?: string;
     style?: CSSProperties;
 }
-export interface WaterFlowProps extends Omit<ScrollViewProps, 'cacheExtent' | 'upperThreshold' | 'lowerThreshold' | 'style' | 'type'>, Pick<BaseProps, 'style'> {
+export interface WaterFlowProps extends Omit<ScrollViewProps, 'cacheExtent' | 'upperThreshold' | 'lowerThreshold' | 'style'>, Pick<BaseProps, 'style'> {
     /**
      * 距顶部多少个FlowItem时，触发 scrolltoupper 事件
      * @default 0
@@ -22,36 +22,6 @@ export interface WaterFlowProps extends Omit<ScrollViewProps, 'cacheExtent' | 'u
      * @default 50
      */
     cacheCount?: number;
-    /**
-     * 滚动事件。与内部虚拟列表滚动处理链式调用，不会覆盖触底/分页逻辑。
-     * 仅 default 模式（自带 ScrollView）时生效。
-     */
-    onScroll?: ScrollViewProps['onScroll'];
-    /**
-     * 受控竖向滚动位置。仅传入有效 number 时下发给 ScrollView；
-     * undefined/null 表示取消受控（避免 H5 将 null 转为 0 导致归顶）。
-     */
-    scrollTop?: number;
-    /**
-     * 受控横向滚动位置，语义同 scrollTop。
-     */
-    scrollLeft?: number;
-    /** 是否嵌套模式，与 plato 对齐；true=使用父级滚动，需配合 scrollElement 或 Context；不传或 false=default */
-    nestedScroll?: boolean;
-    /** 自定义滚动容器 ref，nestedScroll 模式下从 props 或 Context 获取 */
-    scrollElement?: RefObject<HTMLElement | null>;
-    /** WaterFlow 内容在滚动容器中的起始偏移（上方有其他内容时使用） */
-    startOffset?: number;
-    /** 可视区高度，scrollElement 模式下可选，不传则从 scrollElement.clientHeight 获取 */
-    containerHeight?: number;
-    /** 瀑布流内容高度变化时回调，便于 List 动高联动（避免底部空白） */
-    onScrollHeightChange?: (height: number) => void;
-    /** scrollIntoView 滚动完成后回调，便于父组件清空 scrollIntoView 以支持重复点击同一目标 */
-    onScrollIntoViewComplete?: () => void;
-}
-/** WaterFlow ref 类型，current 指向内容容器，用于 IntersectionObserver root、SelectorQuery.in 等 */
-export interface WaterFlowRef {
-    current: HTMLElement | null;
 }
 export interface FlowSectionProps extends BaseProps {
     /**

package/dist/components/water-flow/node.d.ts

@@ -29,8 +29,6 @@ export declare const NodeEvents: {
 export declare class Node extends StatefulEventBus<NodeState> {
     root: Root;
     section: Section;
-    /** 小程序：测量用内层 View 的 DOM；H5：getBoundingClientRect 用 */
-    private _measureEl;
     id: string;
     /**
      * 原始索引，即一维数组中的索引
@@ -45,7 +43,6 @@ export declare class Node extends StatefulEventBus<NodeState> {
      */
     col: number;
     constructor(root: Root, section: Section, props: NodeProps);
-    attachMeasureElement(el: HTMLElement | null): void;
     private setupSubscriptions;
     /**
      * 测量节点的尺寸信息

package/dist/components/water-flow/node.js

@@ -1,8 +1,6 @@
 import '../../utils/index.js';
 import { SectionEvents } from './section.js';
 import { StatefulEventBus } from './stateful-event-bus.js';
-import { isWeb, isWeapp } from './utils.js';
-import { weappScope } from '../../utils/weapp-scope.js';
 import { getRectSizeSync } from '../../utils/dom.js';
 
 const NodeEvents = {
@@ -20,15 +18,10 @@ class Node extends StatefulEventBus {
         });
         this.root = root;
         this.section = section;
-        /** 小程序：测量用内层 View 的 DOM；H5：getBoundingClientRect 用 */
-        this._measureEl = null;
         const nodeId = `${root.id}-${section.id}-item-${childIndex}`;
         Object.assign(this, { id: nodeId, childIndex, order, col });
         this.setupSubscriptions();
     }
-    attachMeasureElement(el) {
-        this._measureEl = el;
-    }
     setupSubscriptions() {
         this.sub('layouted', () => {
             /**
@@ -63,33 +56,7 @@ class Node extends StatefulEventBus {
      * 测量节点的尺寸信息
      */
     async measure() {
-        let width;
-        let height;
-        if (isWeb() && this._measureEl) {
-            const r = this._measureEl.getBoundingClientRect();
-            width = r.width;
-            height = r.height;
-        }
-        else if (isWeapp && this._measureEl) {
-            const scope = weappScope({ current: this._measureEl });
-            const res = await getRectSizeSync(`#${this.id}`, 100, 3, scope);
-            width = res.width;
-            height = res.height;
-        }
-        else {
-            const res = await getRectSizeSync(`#${this.id}`, 100, 3);
-            width = res.width;
-            height = res.height;
-        }
-        if (typeof width !== 'number' ||
-            typeof height !== 'number' ||
-            !Number.isFinite(width) ||
-            !Number.isFinite(height) ||
-            width <= 0 ||
-            height <= 0) {
-            const s = this.getState();
-            return { width: s.width, height: s.height };
-        }
+        const { height, width } = await getRectSizeSync(`#${this.id}`, 100, 3);
         this.setStateBatch({
             width,
             height,

package/dist/components/water-flow/node.js.map

@@ -1 +1 @@
-{"version":3,"file":"node.js","sources":["../../../src/components/water-flow/node.ts"],"sourcesContent":["import { getRectSizeSync, weappScope } from '../../utils'\nimport { Root } from './root'\nimport { Section, SectionEvents } from './section'\nimport { StatefulEventBus } from './stateful-event-bus'\nimport { isWeapp, isWeb } from './utils'\n\ninterface NodeProps {\n  /**\n   * 原始索引，即一维数组中的索引\n   */\n  childIndex: number\n  /**\n   * 在列里的顺序\n   */\n  order: number\n  /**\n   * 位于哪一列\n   */\n  col: number\n  height: number\n}\n\ntype NodeState = {\n  top: number\n  width: number\n  height: number\n  layouted: boolean\n  scrollTop: number\n};\n\nexport const NodeEvents = {\n  Resize: Symbol.for('resize'),\n}\n\nexport class Node extends StatefulEventBus<NodeState> {\n  /** 小程序：测量用内层 View 的 DOM；H5：getBoundingClientRect 用 */\n  private _measureEl: HTMLElement | null = null\n\n  id: string\n  /**\n   * 原始索引，即一维数组中的索引\n   */\n  childIndex: number\n  /**\n   * 在列里的顺序\n   */\n  order: number\n  /**\n   * 位于哪一列\n   */\n  col: number\n  constructor(public root: Root, public section: Section, props: NodeProps) {\n    const { height, childIndex, order, col } = props\n    super({\n      top: 0,\n      width: 0,\n      height,\n      scrollTop: 0,\n      layouted: false,\n    })\n    const nodeId = `${root.id}-${section.id}-item-${childIndex}`\n    Object.assign(this, { id: nodeId, childIndex, order, col })\n    this.setupSubscriptions()\n  }\n\n  attachMeasureElement (el: HTMLElement | null) {\n    this._measureEl = el\n  }\n\n  private setupSubscriptions() {\n    this.sub('layouted', () => {\n      /**\n       * 如果当前分组所有的节点都完成布局计算，那么向分组推送 `AllNodesLayouted` 事件，section会在这个时机做一些计算\n       */\n      if (\n        [...this.section.nodes.values()].every(\n          (node) => node.getState().layouted\n        )\n      ) {\n        this.section.notify(SectionEvents.AllNodesLayouted)\n      }\n    })\n\n    /**\n     * 如果节点的尺寸发生了变化（这通常出现在节点内容包含网络数据的情况下，比如图片，这时要求用户调用 useFlowItemPositioner 返回的 resize 方法通知数据模型去重新计算布局）\n     *\n     * - 更新当前节点所在列之后的所有节点的位置信息\n     *\n     * - 通知 section 更新布局\n     */\n    this.sub(NodeEvents.Resize, async () => {\n      const { width, height } = this.getState()\n      const newSize = await this.measure()\n      if (newSize.height === height && newSize.width === width) {\n        return\n      }\n      this.updateBehindNodesPosition()\n      this.section.pub(SectionEvents.Resize, {\n        node: this,\n        newSize,\n        originalSize: { width, height },\n      })\n    })\n  }\n\n  /**\n   * 测量节点的尺寸信息\n   */\n  public async measure() {\n    let width: number | undefined\n    let height: number | undefined\n    if (isWeb() && this._measureEl) {\n      const r = this._measureEl.getBoundingClientRect()\n      width = r.width\n      height = r.height\n    } else if (isWeapp && this._measureEl) {\n      const scope = weappScope({ current: this._measureEl as any })\n      const res = await getRectSizeSync(`#${this.id}`, 100, 3, scope)\n      width = res.width\n      height = res.height\n    } else {\n      const res = await getRectSizeSync(`#${this.id}`, 100, 3)\n      width = res.width\n      height = res.height\n    }\n    if (\n      typeof width !== 'number' ||\n      typeof height !== 'number' ||\n      !Number.isFinite(width) ||\n      !Number.isFinite(height) ||\n      width <= 0 ||\n      height <= 0\n    ) {\n      const s = this.getState()\n      return { width: s.width, height: s.height }\n    }\n    this.setStateBatch({\n      width,\n      height,\n      layouted: true,\n    })\n    return { width, height }\n  }\n\n  /**\n   * 更新节点所在列后面的节点的位置\n   */\n  updateBehindNodesPosition() {\n    const currentColumn = this.section.columnMap[this.col]\n    let start = this.order + 1\n\n    if (start > currentColumn.length - 1) {\n      return\n    }\n    for (; start < currentColumn.length; start++) {\n      const node = currentColumn[start]\n      const previousNode = currentColumn[start - 1]\n      const {\n        top: previousNodeTop,\n        height: previousNodeHeight,\n        scrollTop: previousNodeScrollTop,\n      } = previousNode.getState()\n      const rowGap = this.section.rowGap\n      node.setStateBatch({\n        top: previousNodeTop + previousNodeHeight + rowGap,\n        scrollTop: previousNodeScrollTop + previousNodeHeight + rowGap,\n      })\n    }\n  }\n\n  /**\n   * 节点是否可见\n   */\n  get isInRange() {\n    const { scrollBoundaryStart, scrollBoundaryEnd } = this.root\n    const { height: nodeHeight, scrollTop: nodeScrollTop } = this.getState()\n    return (\n      nodeScrollTop < scrollBoundaryEnd &&\n      nodeScrollTop + nodeHeight > scrollBoundaryStart\n    )\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"node.js","sources":["../../../src/components/water-flow/node.ts"],"sourcesContent":["import { getRectSizeSync } from '../../utils'\nimport { Root } from './root'\nimport { Section, SectionEvents } from './section'\nimport { StatefulEventBus } from './stateful-event-bus'\n\ninterface NodeProps {\n  /**\n   * 原始索引，即一维数组中的索引\n   */\n  childIndex: number\n  /**\n   * 在列里的顺序\n   */\n  order: number\n  /**\n   * 位于哪一列\n   */\n  col: number\n  height: number\n}\n\ntype NodeState = {\n  top: number\n  width: number\n  height: number\n  layouted: boolean\n  scrollTop: number\n};\n\nexport const NodeEvents = {\n  Resize: Symbol.for('resize'),\n}\n\nexport class Node extends StatefulEventBus<NodeState> {\n  id: string\n  /**\n   * 原始索引，即一维数组中的索引\n   */\n  childIndex: number\n  /**\n   * 在列里的顺序\n   */\n  order: number\n  /**\n   * 位于哪一列\n   */\n  col: number\n  constructor(public root: Root, public section: Section, props: NodeProps) {\n    const { height, childIndex, order, col } = props\n    super({\n      top: 0,\n      width: 0,\n      height,\n      scrollTop: 0,\n      layouted: false,\n    })\n    const nodeId = `${root.id}-${section.id}-item-${childIndex}`\n    Object.assign(this, { id: nodeId, childIndex, order, col })\n    this.setupSubscriptions()\n  }\n\n  private setupSubscriptions() {\n    this.sub('layouted', () => {\n      /**\n       * 如果当前分组所有的节点都完成布局计算，那么向分组推送 `AllNodesLayouted` 事件，section会在这个时机做一些计算\n       */\n      if (\n        [...this.section.nodes.values()].every(\n          (node) => node.getState().layouted\n        )\n      ) {\n        this.section.notify(SectionEvents.AllNodesLayouted)\n      }\n    })\n\n    /**\n     * 如果节点的尺寸发生了变化（这通常出现在节点内容包含网络数据的情况下，比如图片，这时要求用户调用 useFlowItemPositioner 返回的 resize 方法通知数据模型去重新计算布局）\n     *\n     * - 更新当前节点所在列之后的所有节点的位置信息\n     *\n     * - 通知 section 更新布局\n     */\n    this.sub(NodeEvents.Resize, async () => {\n      const { width, height } = this.getState()\n      const newSize = await this.measure()\n      if (newSize.height === height && newSize.width === width) {\n        return\n      }\n      this.updateBehindNodesPosition()\n      this.section.pub(SectionEvents.Resize, {\n        node: this,\n        newSize,\n        originalSize: { width, height },\n      })\n    })\n  }\n\n  /**\n   * 测量节点的尺寸信息\n   */\n  public async measure() {\n    const { height, width } = await getRectSizeSync(`#${this.id}`, 100, 3)\n    this.setStateBatch({\n      width,\n      height,\n      layouted: true,\n    })\n    return { width, height }\n  }\n\n  /**\n   * 更新节点所在列后面的节点的位置\n   */\n  updateBehindNodesPosition() {\n    const currentColumn = this.section.columnMap[this.col]\n    let start = this.order + 1\n\n    if (start > currentColumn.length - 1) {\n      return\n    }\n    for (; start < currentColumn.length; start++) {\n      const node = currentColumn[start]\n      const previousNode = currentColumn[start - 1]\n      const {\n        top: previousNodeTop,\n        height: previousNodeHeight,\n        scrollTop: previousNodeScrollTop,\n      } = previousNode.getState()\n      const rowGap = this.section.rowGap\n      node.setStateBatch({\n        top: previousNodeTop + previousNodeHeight + rowGap,\n        scrollTop: previousNodeScrollTop + previousNodeHeight + rowGap,\n      })\n    }\n  }\n\n  /**\n   * 节点是否可见\n   */\n  get isInRange() {\n    const { scrollBoundaryStart, scrollBoundaryEnd } = this.root\n    const { height: nodeHeight, scrollTop: nodeScrollTop } = this.getState()\n    return (\n      nodeScrollTop < scrollBoundaryEnd &&\n      nodeScrollTop + nodeHeight > scrollBoundaryStart\n    )\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/water-flow/root.d.ts

@@ -2,10 +2,7 @@ import { Node } from './node';
 import { Section } from './section';
 import { StatefulEventBus } from './stateful-event-bus';
 import type { BaseProps, ScrollDirection, Size, WaterFlowProps } from './interface';
-export type RootProps = Pick<WaterFlowProps, 'cacheCount' | 'lowerThresholdCount' | 'upperThresholdCount'> & Required<Pick<BaseProps, 'id'>> & {
-    /** scrollElement 模式下为 true，不测量自有容器；此时需布局全部 section 以展开完整高度 */
-    skipContainerMeasure?: boolean;
-};
+export type RootProps = Pick<WaterFlowProps, 'cacheCount' | 'lowerThresholdCount' | 'upperThresholdCount'> & Required<Pick<BaseProps, 'id'>>;
 type RootState = {
     /** 是否在滚动中 */
     isScrolling: boolean;
@@ -55,17 +52,9 @@ export declare class Root extends StatefulEventBus<RootState, Events> {
      */
     sections: Section[];
     /**
-     * 设置预加载的 Item 条数（与 props.cacheCount 一致，收敛目标）。
+     * 设置预加载的 Item 条数。
      */
     cacheCount: number;
-    /**
-     * Node 层向上（列索引减小方向）预缓存条数，可与 cacheCount 不同（快速滑动单边放大）。
-     */
-    nodeCacheBackward: number;
-    /**
-     * Node 层向下（列索引增大方向）预缓存条数。
-     */
-    nodeCacheForward: number;
     upperThresholdCount: number;
     lowerThresholdCount: number;
     /**
@@ -76,19 +65,7 @@ export declare class Root extends StatefulEventBus<RootState, Events> {
      * 触发滚动阈值对应的 scrollTop 值
      */
     lowerThresholdScrollTop: number;
-    /** scrollElement 模式下为 true，需布局全部 section 以展开完整高度供父容器滚动 */
-    skipContainerMeasure: boolean;
-    /** 当前是否处于触顶区域；初始为 true（起始在顶部），只有从 false→true 时才触发事件 */
-    private _inUpperZone;
-    /** 当前是否处于触底区域；初始为 false */
-    private _inLowerZone;
-    /** scrollHeight 更新防抖（raf），减轻 pushNodes 后测量前后的高度跳变 */
-    private _scrollHeightRafId;
     constructor(props: RootProps);
-    /**
-     * 挂载后由 WaterFlow 调用：用当前根容器 DOM（与 #id 同节点或 ScrollView 外壳）测量 containerSize。
-     */
-    measureContainerSize(measureEl: HTMLElement | null): Promise<void>;
     /**
      * 设置订阅事件
      */
@@ -117,15 +94,8 @@ export declare class Root extends StatefulEventBus<RootState, Events> {
     /**
      * 处理滚动到阈值的情况
      * 检测当前滚动位置是否达到了上下阈值，并触发相应的事件
-     * scrollElement 模式：scrollOffset 为内容内偏移（scrollTop - startOffset），upper/lowerThresholdScrollTop 基于本组件内容计算，触顶/触底以本 WaterFlow 内容为基准
      */
     private handleReachThreshold;
-    /**
-     * 列表追加并完成 finalize 后调用：重置触底边沿状态（_inLowerZone），
-     * 使用户仍在底部时下一次滚动能再次触发 onScrollToLower，而不必先上滑再下滑。
-     * 不在此处同步调用 handleReachThreshold，避免仍在底部时立刻连发触底（与误触区分）。
-     */
-    resetLowerReachEdgeAfterContentChange(): void;
     /**
      * 容器的滚动上边界
      */
@@ -143,10 +113,9 @@ export declare class Root extends StatefulEventBus<RootState, Events> {
      */
     get sectionRange(): number[][];
     /**
-     * 更新总滚动高度（各 Section 累计）。
-     * @param immediate true 时跳过 raf 防抖（如 finalizePushNodesStateIfNeeded），避免高度滞后引起跳动
+     * 计算滚动高度
      */
-    updateScrollHeight(immediate?: boolean): void;
+    updateScrollHeight(): void;
     /**
      * 注册分组
      */
@@ -163,10 +132,6 @@ export declare class Root extends StatefulEventBus<RootState, Events> {
      * 查找节点
      */
     findNode(id: string): Node;
-    /**
-     * 设置 Node 层上下方向预缓存条数，并刷新可见分组内的列渲染区间。
-     */
-    setNodeCacheRange(backward: number, forward: number): void;
     /**
      * 获取分组渲染区间
      */

package/dist/components/water-flow/root.js

@@ -1,9 +1,7 @@
-import { cancelAnimationFrame, requestAnimationFrame } from '@tarojs/runtime';
 import { nextTick } from '@tarojs/taro';
 import '../../utils/index.js';
 import { StatefulEventBus } from './stateful-event-bus.js';
-import { getSysInfo, isH5, isWeapp, isSameRenderRange } from './utils.js';
-import { weappScope } from '../../utils/weapp-scope.js';
+import { getSysInfo, isSameRenderRange } from './utils.js';
 import { getRectSizeSync } from '../../utils/dom.js';
 
 /* eslint-disable no-labels */
@@ -20,7 +18,7 @@ const RootEvents = {
  */
 class Root extends StatefulEventBus {
     constructor(props) {
-        const { id, cacheCount, lowerThresholdCount, upperThresholdCount, skipContainerMeasure } = props;
+        const { id, cacheCount, lowerThresholdCount, upperThresholdCount } = props;
         super({
             isScrolling: false,
             scrollOffset: 0,
@@ -45,17 +43,9 @@ class Root extends StatefulEventBus {
          */
         this.sections = [];
         /**
-         * 设置预加载的 Item 条数（与 props.cacheCount 一致，收敛目标）。
+         * 设置预加载的 Item 条数。
          */
         this.cacheCount = 1;
-        /**
-         * Node 层向上（列索引减小方向）预缓存条数，可与 cacheCount 不同（快速滑动单边放大）。
-         */
-        this.nodeCacheBackward = 1;
-        /**
-         * Node 层向下（列索引增大方向）预缓存条数。
-         */
-        this.nodeCacheForward = 1;
         this.upperThresholdCount = 0;
         this.lowerThresholdCount = 0;
         /**
@@ -66,83 +56,48 @@ class Root extends StatefulEventBus {
          * 触发滚动阈值对应的 scrollTop 值
          */
         this.lowerThresholdScrollTop = Infinity;
-        /** scrollElement 模式下为 true，需布局全部 section 以展开完整高度供父容器滚动 */
-        this.skipContainerMeasure = false;
-        /** 当前是否处于触顶区域；初始为 true（起始在顶部），只有从 false→true 时才触发事件 */
-        this._inUpperZone = true;
-        /** 当前是否处于触底区域；初始为 false */
-        this._inLowerZone = false;
-        /** scrollHeight 更新防抖（raf），减轻 pushNodes 后测量前后的高度跳变 */
-        this._scrollHeightRafId = null;
         Object.assign(this, {
             id,
             cacheCount,
             lowerThresholdCount,
             upperThresholdCount,
-            skipContainerMeasure: !!skipContainerMeasure,
         });
-        this.nodeCacheBackward = cacheCount;
-        this.nodeCacheForward = cacheCount;
         this.setupSubscriptions();
+        getRectSizeSync(`#${id}`, 100).then(({ width = windowWidth, height = windowHeight }) => {
+            this.setStateIn('containerSize', {
+                width,
+                height,
+            });
+        });
         this.renderInitialLayout();
     }
-    /**
-     * 挂载后由 WaterFlow 调用：用当前根容器 DOM（与 #id 同节点或 ScrollView 外壳）测量 containerSize。
-     */
-    async measureContainerSize(measureEl) {
-        var _a, _b, _c, _d;
-        if (this.skipContainerMeasure)
-            return;
-        const { windowWidth, windowHeight } = getSysInfo();
-        let width = windowWidth;
-        let height = windowHeight;
-        if (isH5 && measureEl && typeof measureEl.getBoundingClientRect === 'function') {
-            const r = measureEl.getBoundingClientRect();
-            width = r.width;
-            height = r.height;
-        }
-        else if (isWeapp && measureEl) {
-            const scope = weappScope({ current: measureEl });
-            const res = await getRectSizeSync(`#${this.id}`, 100, 5, scope);
-            width = (_a = res.width) !== null && _a !== void 0 ? _a : width;
-            height = (_b = res.height) !== null && _b !== void 0 ? _b : height;
-        }
-        else {
-            const res = await getRectSizeSync(`#${this.id}`, 100, 5);
-            width = (_c = res.width) !== null && _c !== void 0 ? _c : width;
-            height = (_d = res.height) !== null && _d !== void 0 ? _d : height;
-        }
-        if (typeof width === 'number' &&
-            typeof height === 'number' &&
-            Number.isFinite(width) &&
-            Number.isFinite(height) &&
-            width > 0 &&
-            height > 0) {
-            this.setStateIn('containerSize', { width, height });
-        }
-    }
     /**
      * 设置订阅事件
      */
     setupSubscriptions() {
-        /** 滚动：先更新触底阈值，再判触顶/触底并更新分组与总高度，避免同一帧内沿用无效阈值。 */
+        /**
+         * 滚动过程中计算渲染的分组区间
+         * 滚动过程中分组的最大高度会发生更新，可以在这时计算滚动高度
+         */
+        this.sub('scrollOffset', () => {
+            this.setStateIn('renderRange', this.getSectionRenderRange());
+            this.handleReachThreshold();
+            if (this.getState().scrollDirection === 'forward') {
+                this.updateScrollHeight();
+            }
+        });
         this.sub('scrollOffset', () => {
             const sectionSize = this.sections.length;
             const lastSection = this.sections[sectionSize - 1];
-            if (lastSection === null || lastSection === void 0 ? void 0 : lastSection.columnMap.every((column) => { var _a; return (_a = column[column.length - 1]) === null || _a === void 0 ? void 0 : _a.getState().layouted; })) {
+            // 最后一个分组的每一列最后一行都已经完成了布局计算，那么这个时候的总高度应该是准确的
+            if (lastSection.columnMap.every((column) => column[column.length - 1].getState().layouted)) {
                 this.setLowerThresholdScrollTop();
             }
-            this.setStateIn('renderRange', this.getSectionRenderRange());
-            this.handleReachThreshold();
-            this.updateScrollHeight();
         });
         this.sub(RootEvents.AllSectionsLayouted, () => {
-            this.updateScrollHeight();
             this.setUpperThresholdScrollTop();
-            this.setLowerThresholdScrollTop();
         });
         this.sub(RootEvents.Resize, () => {
-            this.updateScrollHeight();
             this.setUpperThresholdScrollTop();
             this.setLowerThresholdScrollTop();
         });
@@ -167,10 +122,8 @@ class Root extends StatefulEventBus {
             const section = this.sections[i];
             section.layoutedSignal.promise.then(() => {
                 this.setStateIn('renderRange', [0, i + 1 > sectionSize ? sectionSize - 1 : i + 1]);
-                // skipContainerMeasure（nestedScroll 模式）：需布局全部 section，使 scrollHeight 展开供父容器滚动
-                // default 模式：容器可视区域已填满则提前终止，减少首屏渲染
-                if (!this.skipContainerMeasure &&
-                    section.getState().scrollTop > this.getState().containerSize.height) {
+                // 容器可视区域已经填满了，没必要再继续
+                if (section.getState().scrollTop > this.getState().containerSize.height) {
                     this.pub(RootEvents.InitialRenderCompleted, section);
                     return;
                 }
@@ -236,14 +189,8 @@ class Root extends StatefulEventBus {
      * 当距底部还有 lowerThresholdCount 个 FlowItem 时的 scrollTop 值
      */
     setLowerThresholdScrollTop() {
-        // 与 setUpperThresholdScrollTop 一致：0 或 undefined 时用「内容底 - 容器高」作为触底阈值
-        if (!this.lowerThresholdCount) {
-            // 必须用 sectionRange 实时计算，避免依赖可能未更新的 scrollHeight 状态
-            const range = this.sectionRange;
-            const totalHeight = range.length > 0 ? range[range.length - 1][1] : 0;
-            // 触底判定：scrollOffset + containerSize.height >= lowerThresholdScrollTop
-            // 须存内容底边 totalHeight(H)。若误存 H-h，则顶部时 h 与 H-h 比较，当 2h>=H 会恒判为在触底区，误触 onScrollToLower。
-            this.lowerThresholdScrollTop = totalHeight;
+        if (this.lowerThresholdCount === 0) {
+            this.lowerThresholdScrollTop = this.getState().scrollHeight - this.getState().containerSize.height;
             return 0;
         }
         const sectionSize = this.sections.length;
@@ -291,26 +238,20 @@ class Root extends StatefulEventBus {
     /**
      * 处理滚动到阈值的情况
      * 检测当前滚动位置是否达到了上下阈值，并触发相应的事件
-     * scrollElement 模式：scrollOffset 为内容内偏移（scrollTop - startOffset），upper/lowerThresholdScrollTop 基于本组件内容计算，触顶/触底以本 WaterFlow 内容为基准
      */
     handleReachThreshold() {
-        const { scrollOffset, containerSize } = this.getState();
-        const inUpper = this.upperThresholdScrollTop !== -Infinity && scrollOffset <= this.upperThresholdScrollTop;
-        const inLower = this.lowerThresholdScrollTop !== Infinity && scrollOffset + containerSize.height >= this.lowerThresholdScrollTop;
-        if (inUpper && !this._inUpperZone)
+        const { upperThresholdScrollTop } = this;
+        const { scrollOffset, scrollDirection, containerSize } = this.getState();
+        if (scrollDirection === 'backward' &&
+            this.upperThresholdScrollTop !== -Infinity &&
+            scrollOffset <= upperThresholdScrollTop) {
             this.pub(RootEvents.ReachUpperThreshold);
-        if (inLower && !this._inLowerZone)
+        }
+        if (scrollDirection === 'forward' &&
+            this.lowerThresholdCount !== Infinity &&
+            scrollOffset + containerSize.height >= this.lowerThresholdScrollTop) {
             this.pub(RootEvents.ReachLowerThreshold);
-        this._inUpperZone = inUpper;
-        this._inLowerZone = inLower;
-    }
-    /**
-     * 列表追加并完成 finalize 后调用：重置触底边沿状态（_inLowerZone），
-     * 使用户仍在底部时下一次滚动能再次触发 onScrollToLower，而不必先上滑再下滑。
-     * 不在此处同步调用 handleReachThreshold，避免仍在底部时立刻连发触底（与误触区分）。
-     */
-    resetLowerReachEdgeAfterContentChange() {
-        this._inLowerZone = false;
+        }
     }
     /**
      * 容器的滚动上边界
@@ -332,44 +273,21 @@ class Root extends StatefulEventBus {
      * @returns [number,number][]
      */
     get sectionRange() {
-        var _a;
         const length = this.sections.length;
         if (length === 0)
             return [];
         const range = Array.from({ length }, () => [0, this.sections[0].maxColumnHeight]);
         for (let i = 1; i < length; i++) {
             const previous = range[i - 1];
-            const prevSection = this.sections[i - 1];
-            const gap = (_a = prevSection.rowGap) !== null && _a !== void 0 ? _a : 0;
-            range[i] = [previous[1] + gap, previous[1] + gap + this.sections[i].maxColumnHeight];
+            range[i] = [previous[1], previous[1] + this.sections[i].maxColumnHeight];
         }
         return range;
     }
     /**
-     * 更新总滚动高度（各 Section 累计）。
-     * @param immediate true 时跳过 raf 防抖（如 finalizePushNodesStateIfNeeded），避免高度滞后引起跳动
+     * 计算滚动高度
      */
-    updateScrollHeight(immediate = false) {
-        const flush = () => {
-            var _a, _b;
-            const next = (_b = (_a = this.sectionRange[this.sectionRange.length - 1]) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : 0;
-            this.setStateIn('scrollHeight', next);
-        };
-        if (immediate) {
-            if (this._scrollHeightRafId != null) {
-                cancelAnimationFrame(this._scrollHeightRafId);
-                this._scrollHeightRafId = null;
-            }
-            flush();
-            return;
-        }
-        if (this._scrollHeightRafId != null) {
-            cancelAnimationFrame(this._scrollHeightRafId);
-        }
-        this._scrollHeightRafId = requestAnimationFrame(() => {
-            this._scrollHeightRafId = null;
-            flush();
-        });
+    updateScrollHeight() {
+        this.setStateIn('scrollHeight', this.sectionRange[this.sectionRange.length - 1][1]);
     }
     /**
      * 注册分组
@@ -397,23 +315,6 @@ class Root extends StatefulEventBus {
     findNode(id) {
         return this.nodeMap.get(id);
     }
-    /**
-     * 设置 Node 层上下方向预缓存条数，并刷新可见分组内的列渲染区间。
-     */
-    setNodeCacheRange(backward, forward) {
-        const b = Math.max(0, Math.floor(backward));
-        const f = Math.max(0, Math.floor(forward));
-        if (this.nodeCacheBackward === b && this.nodeCacheForward === f) {
-            return;
-        }
-        this.nodeCacheBackward = b;
-        this.nodeCacheForward = f;
-        for (const section of this.sections) {
-            if (section.isInRange) {
-                section.setStateIn('renderRange', section.getNodeRenderRange());
-            }
-        }
-    }
     /**
      * 获取分组渲染区间
      */
@@ -432,16 +333,15 @@ class Root extends StatefulEventBus {
         if (result[1] === -Infinity) {
             result[1] = this.sections.length - 1;
         }
+        const scrollDirection = this.getState().scrollDirection;
         const [backwardCache, forwardCache] = this.calcCacheSection(result);
-        // 双向预缓存，避免反向滚动时出现空白（原逻辑仅在滚动方向缓存，反向时未预渲染）
-        const backwardDistance = backwardCache;
-        const forwardDistance = forwardCache;
+        const backwardDistance = scrollDirection === 'backward' ? backwardCache : 0;
+        const forwardDistance = scrollDirection === 'forward' ? forwardCache : 0;
         const overscanBackward = result[0] - backwardDistance;
         const overscanForward = result[1] + forwardDistance;
         result[0] = overscanBackward < 0 ? 0 : overscanBackward;
         result[1] = overscanForward > this.sections.length ? this.sections.length - 1 : overscanForward;
-        const prevRange = this.getState().renderRange;
-        return isSameRenderRange(result, prevRange) ? prevRange : result;
+        return isSameRenderRange(result, this.getState().renderRange) ? this.getState().renderRange : result;
     }
     /**
      * 计算预渲染的分组个数