npm - @tarojs/components-advanced - Versions diffs - 4.1.12-beta.4 → 4.1.12-beta.40 - Mend

@tarojs/components-advanced 4.1.12-beta.4 → 4.1.12-beta.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/dist/components/list/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../src/components/list/utils.ts"],"sourcesContent":["/*\n List 组件工具函数\n /\n\n/* 判断是否为微信小程序 /\nexport const isWeapp = process.env.TARO_ENV === 'weapp'\n\n/* 判断是否为支付宝小程序 /\nexport const isAlipay = process.env.TARO_ENV === 'alipay'\n\n/* 判断是否为 H5 /\nexport const isH5 = process.env.TARO_ENV === 'h5'\n\n/* 判断是否为小程序环境（微信/支付宝/百度/京东/头条等） /\nexport const isMiniProgram = isWeapp \|\| isAlipay \|\| process.env.TARO_ENV === 'swan' \|\| process.env.TARO_ENV === 'tt' \|\| process.env.TARO_ENV === 'jd'\n\n/\n 是否支持原生 refresher（ScrollView refresher-）\n 以各平台 components 为准：weapp/jd/tt 的 ScrollView 有 refresher-enabled 等；harmony-hybrid 的 harmony-definition 中 refresher-* 为 false，走自定义下拉\n */\nexport const supportsNativeRefresher = isMiniProgram\n"],"names":[],"mappings":"AAAA;;AAEG;~~AAEH~~;AACa,MAAA,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK;AAEhD;AACa,MAAA,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK;AAEjD;AACa,MAAA,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK;AAE7C;AACO,MAAM,aAAa,GAAG,OAAO,IAAI,QAAQ,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,IAAI,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK;AAEjJ;;;AAGG;AACI,MAAM,uBAAuB,GAAG;;;;"}
1	+ {"version":3,"file":"utils.js","sources":["../../../src/components/list/utils.ts"],"sourcesContent":["/*\n List 组件工具函数\n /\n\nimport Taro from '@tarojs/taro'\n\n/* 有 scope 则 `query.in(scope)`，否则与原先一致（page / 根） /\nexport function createSelectorQueryScoped (selectorQueryScope?: object) {\n if (selectorQueryScope != null) {\n return Taro.createSelectorQuery().in(selectorQueryScope as any)\n }\n const instance = Taro.getCurrentInstance()\n return instance?.page\n ? Taro.createSelectorQuery().in(instance.page as any)\n : Taro.createSelectorQuery()\n}\n\n/* IO 作用域，缺省为 page /\nexport function getMiniProgramObserverScope (selectorQueryScope?: object) {\n return (selectorQueryScope ?? Taro.getCurrentInstance().page) as any\n}\n\n/* 判断是否为微信小程序 /\nexport const isWeapp = process.env.TARO_ENV === 'weapp'\n\n/* 判断是否为支付宝小程序 /\nexport const isAlipay = process.env.TARO_ENV === 'alipay'\n\n/* 判断是否为 H5 /\nexport const isH5 = process.env.TARO_ENV === 'h5'\n\n/* 判断是否为小程序环境（微信/支付宝/百度/京东/头条等） /\nexport const isMiniProgram = isWeapp \|\| isAlipay \|\| process.env.TARO_ENV === 'swan' \|\| process.env.TARO_ENV === 'tt' \|\| process.env.TARO_ENV === 'jd'\n\n/\n 是否支持原生 refresher（ScrollView refresher-）\n 以各平台 components 为准：weapp/jd/tt 的 ScrollView 有 refresher-enabled 等；harmony-hybrid 的 harmony-definition 中 refresher-* 为 false，走自定义下拉\n */\nexport const supportsNativeRefresher = isMiniProgram\n"],"names":[],"mappings":";;AAAA;;AAEG;AAIH;AACM,SAAU,yBAAyB,CAAE,kBAA2B,EAAA;AACpE,IAAA,IAAI,kBAAkB,IAAI,IAAI,EAAE;QAC9B,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC,EAAE,CAAC,kBAAyB,CAAC;;AAEjE,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,EAAE;AAC1C,IAAA,OAAO,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,QAAQ,CAAE,IAAI;UACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAW;AACpD,UAAE,IAAI,CAAC,mBAAmB,EAAE;AAChC;AAEA;AACM,SAAU,2BAA2B,CAAE,kBAA2B,EAAA;AACtE,IAAA,QAAQ,kBAAkB,KAAlB,IAAA,IAAA,kBAAkB,cAAlB,kBAAkB,GAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI;AAC9D;AAEA;AACa,MAAA,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK;AAEhD;AACa,MAAA,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK;AAEjD;AACa,MAAA,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK;AAE7C;AACO,MAAM,aAAa,GAAG,OAAO,IAAI,QAAQ,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,IAAI,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK;AAEjJ;;;AAGG;AACI,MAAM,uBAAuB,GAAG;;;;"}

package/dist/components/virtual-list/vue/list.d.ts CHANGED Viewed

@@ -2,11 +2,11 @@ import Preset from '../preset';
 declare const _default: import("vue").DefineComponent<{
     id: StringConstructor;
     height: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     width: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     item: {
@@ -93,11 +93,11 @@ declare const _default: import("vue").DefineComponent<{
     instance: import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
         id: StringConstructor;
         height: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             required: true;
         };
         width: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             required: true;
         };
         item: {
@@ -181,11 +181,11 @@ declare const _default: import("vue").DefineComponent<{
     }>> & {}, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<import("vue").ExtractPropTypes<{
         id: StringConstructor;
         height: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             required: true;
         };
         width: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             required: true;
         };
         item: {
@@ -276,11 +276,11 @@ declare const _default: import("vue").DefineComponent<{
     }, Readonly<import("vue").ExtractPropTypes<{
         id: StringConstructor;
         height: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             required: true;
         };
         width: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             required: true;
         };
         item: {
@@ -394,11 +394,11 @@ declare const _default: import("vue").DefineComponent<{
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: StringConstructor;
     height: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     width: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     item: {

package/dist/components/virtual-waterfall/vue/waterfall.d.ts CHANGED Viewed

@@ -2,11 +2,11 @@ import Preset from '../preset';
 declare const _default: import("vue").DefineComponent<{
     id: StringConstructor;
     height: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     width: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     column: NumberConstructor;
@@ -87,11 +87,11 @@ declare const _default: import("vue").DefineComponent<{
     instance: import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
         id: StringConstructor;
         height: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             required: true;
         };
         width: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             required: true;
         };
         column: NumberConstructor;
@@ -169,11 +169,11 @@ declare const _default: import("vue").DefineComponent<{
     }>> & {}, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<import("vue").ExtractPropTypes<{
         id: StringConstructor;
         height: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             required: true;
         };
         width: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             required: true;
         };
         column: NumberConstructor;
@@ -258,11 +258,11 @@ declare const _default: import("vue").DefineComponent<{
     }, Readonly<import("vue").ExtractPropTypes<{
         id: StringConstructor;
         height: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             required: true;
         };
         width: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             required: true;
         };
         column: NumberConstructor;
@@ -368,11 +368,11 @@ declare const _default: import("vue").DefineComponent<{
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: StringConstructor;
     height: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     width: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     column: NumberConstructor;

package/dist/components/water-flow/flow-item.js CHANGED Viewed

@@ -35,13 +35,15 @@ function FlowItemContainer(_a) {
     const itemStyle = useMemo(() => {
         const baseStyle = {
             width: '100%',
-            minHeight: node.section.defaultSize,
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            transform: `translate3d(0px, ${top$}px, 0px)`,
         };
         if (!layouted$) {
-            return baseStyle;
+            return Object.assign(Object.assign({}, baseStyle), { minHeight: node.section.defaultSize });
         }
-        Reflect.deleteProperty(baseStyle, 'minHeight');
-        return Object.assign(Object.assign({}, baseStyle), { height: height$, transition: 'transform 20ms cubic-bezier(0.075, 0.82, 0.165, 1)', willChange: 'transform', position: 'absolute', top: 0, left: 0, transform: `translate3d(0px, ${top$}px, 0px)` });
+        return Object.assign(Object.assign({}, baseStyle), { height: height$ });
     }, [top$, layouted$, height$]);
     useEffect(() => {
         let observer;

package/dist/components/water-flow/flow-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"flow-item.js","sources":["../../../src/components/water-flow/flow-item.ts"],"sourcesContent":["import { View } from '@tarojs/components'\nimport {\n type CSSProperties,\n type PropsWithChildren,\n createContext,\n createElement,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from 'react'\n\nimport { Node, NodeEvents } from './node'\nimport { useMemoizedFn } from './use-memoized-fn'\nimport { useObservedAttr } from './use-observed-attr'\nimport { isWeb } from './utils'\n\nimport type { FlowItemContainerProps } from './interface'\n\nconst FlowItemContext = createContext<{ node: Node }>(Object.create(null))\nexport const useFlowItemPositioner = () => {\n const nodeModel = useContext(FlowItemContext).node\n const width$ = useObservedAttr(nodeModel, 'width')\n const height$ = useObservedAttr(nodeModel, 'height')\n const top$ = useObservedAttr(nodeModel, 'top')\n const scrollTop$ = useObservedAttr(nodeModel, 'scrollTop')\n\n return {\n resize: useMemoizedFn(() => {\n if (!isWeb()) {\n nodeModel.pub(NodeEvents.Resize)\n }\n }),\n top: top$,\n scrollTop: scrollTop$,\n width: width$,\n height: height$,\n }\n}\n\nexport function FlowItemContainer({\n children,\n ...props\n}: PropsWithChildren<FlowItemContainerProps>) {\n const { node } = props\n const layouted$ = useObservedAttr(node, 'layouted')\n const top$ = useObservedAttr(node, 'top')\n const height$ = useObservedAttr(node, 'height')\n const refFlowItem = useRef<HTMLElement>()\n\n const itemStyle: CSSProperties = useMemo(() => {\n const baseStyle: CSSProperties = {\n width: '100%',\n ~~minHeight~~: ~~node.section.defaultSize~~,\n }\n if (!layouted$) {\n return ~~baseStyle~~\n }\n ~~Reflect.deleteProperty(baseStyle, 'minHeight')~~\n return {\n ...baseStyle,\n height: height$,\n transition: 'transform 20ms cubic-bezier(0.075, 0.82, 0.165, 1)',\n willChange: 'transform',\n position: 'absolute',\n top: 0,\n left: 0,\n transform: `translate3d(0px, ${top$}px, 0px)`,\n }\n }, [top$, layouted$, height$])\n\n useEffect(() => {\n let observer: ResizeObserver\n if (isWeb() && typeof ResizeObserver !== 'undefined') {\n observer = new ResizeObserver(() => {\n node.pub(NodeEvents.Resize)\n })\n observer.observe(refFlowItem.current!)\n }\n return () => {\n if (observer) {\n observer.disconnect()\n }\n }\n }, [node])\n\n useLayoutEffect(() => {\n node.measure()\n }, [node])\n\n return createElement(\n View,\n { style: itemStyle, key: node.id },\n createElement(\n View,\n { id: node.id, ref: refFlowItem },\n createElement(FlowItemContext.Provider, { value: { node } }, children)\n )\n )\n}\n\nexport function FlowItem(props: PropsWithChildren) {\n return props.children\n}\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,eAAe,GAAG,aAAa,CAAiB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AACnE,MAAM,qBAAqB,GAAG,MAAK;IACxC,MAAM,SAAS,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC,IAAI;IAClD,MAAM,MAAM,GAAG,eAAe,CAAC,SAAS,EAAE,OAAO,CAAC;IAClD,MAAM,OAAO,GAAG,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC;IACpD,MAAM,IAAI,GAAG,eAAe,CAAC,SAAS,EAAE,KAAK,CAAC;IAC9C,MAAM,UAAU,GAAG,eAAe,CAAC,SAAS,EAAE,WAAW,CAAC;IAE1D,OAAO;AACL,QAAA,MAAM,EAAE,aAAa,CAAC,MAAK;AACzB,YAAA,IAAI,CAAC,KAAK,EAAE,EAAE;AACZ,gBAAA,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC;;AAEpC,SAAC,CAAC;AACF,QAAA,GAAG,EAAE,IAAI;AACT,QAAA,SAAS,EAAE,UAAU;AACrB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,OAAO;KAChB;AACH;AAEM,SAAU,iBAAiB,CAAC,EAGU,EAAA;AAHV,IAAA,IAAA,EAChC,QAAQ,EAEkC,GAAA,EAAA,EADvC,KAAK,GAAA,MAAA,CAAA,EAAA,EAFwB,YAGjC,CADS;AAER,IAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK;IACtB,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,EAAE,UAAU,CAAC;IACnD,MAAM,IAAI,GAAG,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC;IACzC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC;AAC/C,IAAA,MAAM,WAAW,GAAG,MAAM,EAAe;AAEzC,IAAA,MAAM,SAAS,GAAkB,OAAO,CAAC,MAAK;AAC5C,QAAA,MAAM,SAAS,GAAkB;AAC/B,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,~~SAAS~~,EAAE,~~IAAI~~,~~CAAC~~,~~OAAO~~,CAAC~~,WAAW~~;~~SACpC;QACD~~,IAAI,CAAC,SAAS,EAAE~~;AACd~~,~~YAAA~~,~~OAAO~~,~~SAAS;;AAElB~~,QAAA,~~OAAO~~,~~CAAC~~,~~cAAc,~~CAAC,SAAS,EAAE~~,WAAW,CAAC~~;~~AAC9C~~,~~QAAA~~,~~OAAA,~~MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,~~EACK~~,SAAS,~~CAAA~~,~~EAAA~~,~~EACZ~~,~~MAAM~~,~~EAAE~~,OAAO,~~EACf~~,~~UAAU~~,~~EAAE~~,~~oDAAoD~~,~~EAChE~~,~~UAAU~~,~~EAAE~~,~~WAAW~~,~~EACvB~~,~~QAAQ~~,~~EAAE~~,~~UAAU~~,~~EACpB~~,~~GAAG~~,~~EAAE~~,~~CAAC~~,~~EACN~~,~~IAAI~~,~~EAAE~~,~~CAAC~~,~~EACP~~,~~SAAS,~~EAAE,~~CAAoB~~,~~iBAAA~~,~~EAAA,IAAI,UAAU,EAC9C,~~CAAA;KACF,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;IAE9B,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAwB;QAC5B,IAAI,KAAK,EAAE,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;AACpD,YAAA,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;AACjC,gBAAA,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC;AAC7B,aAAC,CAAC;AACF,YAAA,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,OAAQ,CAAC;;AAExC,QAAA,OAAO,MAAK;YACV,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,UAAU,EAAE;;AAEzB,SAAC;AACH,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAEV,eAAe,CAAC,MAAK;QACnB,IAAI,CAAC,OAAO,EAAE;AAChB,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAEV,OAAO,aAAa,CAClB,IAAI,EACJ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,EAClC,aAAa,CACX,IAAI,EACJ,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,EACjC,aAAa,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,CAAC,CACvE,CACF;AACH;AAEM,SAAU,QAAQ,CAAC,KAAwB,EAAA;IAC/C,OAAO,KAAK,CAAC,QAAQ;AACvB;;;;"}
1	+ {"version":3,"file":"flow-item.js","sources":["../../../src/components/water-flow/flow-item.ts"],"sourcesContent":["import { View } from '@tarojs/components'\nimport {\n type CSSProperties,\n type PropsWithChildren,\n createContext,\n createElement,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from 'react'\n\nimport { Node, NodeEvents } from './node'\nimport { useMemoizedFn } from './use-memoized-fn'\nimport { useObservedAttr } from './use-observed-attr'\nimport { isWeb } from './utils'\n\nimport type { FlowItemContainerProps } from './interface'\n\nconst FlowItemContext = createContext<{ node: Node }>(Object.create(null))\nexport const useFlowItemPositioner = () => {\n const nodeModel = useContext(FlowItemContext).node\n const width$ = useObservedAttr(nodeModel, 'width')\n const height$ = useObservedAttr(nodeModel, 'height')\n const top$ = useObservedAttr(nodeModel, 'top')\n const scrollTop$ = useObservedAttr(nodeModel, 'scrollTop')\n\n return {\n resize: useMemoizedFn(() => {\n if (!isWeb()) {\n nodeModel.pub(NodeEvents.Resize)\n }\n }),\n top: top$,\n scrollTop: scrollTop$,\n width: width$,\n height: height$,\n }\n}\n\nexport function FlowItemContainer({\n children,\n ...props\n}: PropsWithChildren<FlowItemContainerProps>) {\n const { node } = props\n const layouted$ = useObservedAttr(node, 'layouted')\n const top$ = useObservedAttr(node, 'top')\n const height$ = useObservedAttr(node, 'height')\n const refFlowItem = useRef<HTMLElement>()\n\n const itemStyle: CSSProperties = useMemo(() => {\n const baseStyle: CSSProperties = {\n width: '100%',\n position: 'absolute',\n top: 0,\n left: 0,\n transform: `translate3d(0px, ${top$}px, 0px)`,\n }\n if (!layouted$) {\n return {\n ...baseStyle,\n minHeight: node.section.defaultSize,\n }\n }\n return {\n ...baseStyle,\n height: height$,\n }\n }, [top$, layouted$, height$])\n\n useEffect(() => {\n let observer: ResizeObserver\n if (isWeb() && typeof ResizeObserver !== 'undefined') {\n observer = new ResizeObserver(() => {\n node.pub(NodeEvents.Resize)\n })\n observer.observe(refFlowItem.current!)\n }\n return () => {\n if (observer) {\n observer.disconnect()\n }\n }\n }, [node])\n\n useLayoutEffect(() => {\n node.measure()\n }, [node])\n\n return createElement(\n View,\n { style: itemStyle, key: node.id },\n createElement(\n View,\n { id: node.id, ref: refFlowItem },\n createElement(FlowItemContext.Provider, { value: { node } }, children)\n )\n )\n}\n\nexport function FlowItem(props: PropsWithChildren) {\n return props.children\n}\n"],"names":[],"mappings":"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"}

package/dist/components/water-flow/flow-section.js CHANGED Viewed

@@ -58,7 +58,7 @@ function FlowSection(_a) {
                 return createElement(FlowItemContainer, columnProps, childNode);
             }));
         });
-    }, [children, layouted$, section.columnMap, renderRange$, id]);
+    }, [children, layouted$, section.columnMap, renderRange$]);
     return createElement(View, { style: sectionStyle, className, id: id !== null && id !== void 0 ? id : section.id }, columns);
 }

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

	@@ -1 +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~~$, 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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~~EAAE,EAAE,~~CAAC,CAAC;~~IAE9D~~,OAAO,aAAa,CAClB,IAAI,EACJ,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,KAAA,CAAA,GAAA,EAAE,GAAI,OAAO,CAAC,EAAE,EAAE,EACxD,OAAO,CACR;AACH;;;;"}
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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"}

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

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

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

@@ -1,12 +1,12 @@
 import { ScrollViewProps } from '@tarojs/components';
 import { Node } from './node';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, RefObject } from 'react';
 export interface BaseProps {
     id?: string;
     className?: string;
     style?: CSSProperties;
 }
-export interface WaterFlowProps extends Omit<ScrollViewProps, 'cacheExtent' | 'upperThreshold' | 'lowerThreshold' | 'style'>, Pick<BaseProps, 'style'> {
+export interface WaterFlowProps extends Omit<ScrollViewProps, 'cacheExtent' | 'upperThreshold' | 'lowerThreshold' | 'style' | 'type'>, Pick<BaseProps, 'style'> {
     /**
      * 距顶部多少个FlowItem时，触发 scrolltoupper 事件
      * @default 0
@@ -22,6 +22,22 @@ export interface WaterFlowProps extends Omit<ScrollViewProps, 'cacheExtent' | 'u
      * @default 50
      */
     cacheCount?: 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/root.d.ts CHANGED Viewed

@@ -2,7 +2,10 @@ 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'>>;
+export type RootProps = Pick<WaterFlowProps, 'cacheCount' | 'lowerThresholdCount' | 'upperThresholdCount'> & Required<Pick<BaseProps, 'id'>> & {
+    /** scrollElement 模式下为 true，不测量自有容器；此时需布局全部 section 以展开完整高度 */
+    skipContainerMeasure?: boolean;
+};
 type RootState = {
     /** 是否在滚动中 */
     isScrolling: boolean;
@@ -52,9 +55,17 @@ export declare class Root extends StatefulEventBus<RootState, Events> {
      */
     sections: Section[];
     /**
-     * 设置预加载的 Item 条数。
+     * 设置预加载的 Item 条数（与 props.cacheCount 一致，收敛目标）。
      */
     cacheCount: number;
+    /**
+     * Node 层向上（列索引减小方向）预缓存条数，可与 cacheCount 不同（快速滑动单边放大）。
+     */
+    nodeCacheBackward: number;
+    /**
+     * Node 层向下（列索引增大方向）预缓存条数。
+     */
+    nodeCacheForward: number;
     upperThresholdCount: number;
     lowerThresholdCount: number;
     /**
@@ -65,6 +76,14 @@ 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);
     /**
      * 设置订阅事件
@@ -94,8 +113,15 @@ export declare class Root extends StatefulEventBus<RootState, Events> {
     /**
      * 处理滚动到阈值的情况
      * 检测当前滚动位置是否达到了上下阈值，并触发相应的事件
+     * scrollElement 模式：scrollOffset 为内容内偏移（scrollTop - startOffset），upper/lowerThresholdScrollTop 基于本组件内容计算，触顶/触底以本 WaterFlow 内容为基准
      */
     private handleReachThreshold;
+    /**
+     * 列表追加并完成 finalize 后调用：重置触底边沿状态（_inLowerZone），
+     * 使用户仍在底部时下一次滚动能再次触发 onScrollToLower，而不必先上滑再下滑。
+     * 不在此处同步调用 handleReachThreshold，避免仍在底部时立刻连发触底（与误触区分）。
+     */
+    resetLowerReachEdgeAfterContentChange(): void;
     /**
      * 容器的滚动上边界
      */
@@ -113,9 +139,10 @@ export declare class Root extends StatefulEventBus<RootState, Events> {
      */
     get sectionRange(): number[][];
     /**
-     * 计算滚动高度
+     * 更新总滚动高度（各 Section 累计）。
+     * @param immediate true 时跳过 raf 防抖（如 finalizePushNodesStateIfNeeded），避免高度滞后引起跳动
      */
-    updateScrollHeight(): void;
+    updateScrollHeight(immediate?: boolean): void;
     /**
      * 注册分组
      */
@@ -132,6 +159,10 @@ 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 CHANGED Viewed

@@ -1,3 +1,4 @@
+import { cancelAnimationFrame, requestAnimationFrame } from '@tarojs/runtime';
 import { nextTick } from '@tarojs/taro';
 import '../../utils/index.js';
 import { StatefulEventBus } from './stateful-event-bus.js';
@@ -18,7 +19,7 @@ const RootEvents = {
  */
 class Root extends StatefulEventBus {
     constructor(props) {
-        const { id, cacheCount, lowerThresholdCount, upperThresholdCount } = props;
+        const { id, cacheCount, lowerThresholdCount, upperThresholdCount, skipContainerMeasure } = props;
         super({
             isScrolling: false,
             scrollOffset: 0,
@@ -43,9 +44,17 @@ class Root extends StatefulEventBus {
          */
         this.sections = [];
         /**
-         * 设置预加载的 Item 条数。
+         * 设置预加载的 Item 条数（与 props.cacheCount 一致，收敛目标）。
          */
         this.cacheCount = 1;
+        /**
+         * Node 层向上（列索引减小方向）预缓存条数，可与 cacheCount 不同（快速滑动单边放大）。
+         */
+        this.nodeCacheBackward = 1;
+        /**
+         * Node 层向下（列索引增大方向）预缓存条数。
+         */
+        this.nodeCacheForward = 1;
         this.upperThresholdCount = 0;
         this.lowerThresholdCount = 0;
         /**
@@ -56,48 +65,56 @@ 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,
+        if (!skipContainerMeasure) {
+            getRectSizeSync(`#${id}`, 100).then(({ width = windowWidth, height = windowHeight }) => {
+                this.setStateIn('containerSize', {
+                    width,
+                    height,
+                });
             });
-        });
+        }
         this.renderInitialLayout();
     }
     /**
      * 设置订阅事件
      */
     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.columnMap.every((column) => column[column.length - 1].getState().layouted)) {
+            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; })) {
                 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();
         });
@@ -122,8 +139,10 @@ class Root extends StatefulEventBus {
             const section = this.sections[i];
             section.layoutedSignal.promise.then(() => {
                 this.setStateIn('renderRange', [0, i + 1 > sectionSize ? sectionSize - 1 : i + 1]);
-                // 容器可视区域已经填满了，没必要再继续
-                if (section.getState().scrollTop > this.getState().containerSize.height) {
+                // skipContainerMeasure（nestedScroll 模式）：需布局全部 section，使 scrollHeight 展开供父容器滚动
+                // default 模式：容器可视区域已填满则提前终止，减少首屏渲染
+                if (!this.skipContainerMeasure &&
+                    section.getState().scrollTop > this.getState().containerSize.height) {
                     this.pub(RootEvents.InitialRenderCompleted, section);
                     return;
                 }
@@ -189,8 +208,14 @@ class Root extends StatefulEventBus {
      * 当距底部还有 lowerThresholdCount 个 FlowItem 时的 scrollTop 值
      */
     setLowerThresholdScrollTop() {
-        if (this.lowerThresholdCount === 0) {
-            this.lowerThresholdScrollTop = this.getState().scrollHeight - this.getState().containerSize.height;
+        // 与 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;
             return 0;
         }
         const sectionSize = this.sections.length;
@@ -238,20 +263,26 @@ class Root extends StatefulEventBus {
     /**
      * 处理滚动到阈值的情况
      * 检测当前滚动位置是否达到了上下阈值，并触发相应的事件
+     * scrollElement 模式：scrollOffset 为内容内偏移（scrollTop - startOffset），upper/lowerThresholdScrollTop 基于本组件内容计算，触顶/触底以本 WaterFlow 内容为基准
      */
     handleReachThreshold() {
-        const { upperThresholdScrollTop } = this;
-        const { scrollOffset, scrollDirection, containerSize } = this.getState();
-        if (scrollDirection === 'backward' &&
-            this.upperThresholdScrollTop !== -Infinity &&
-            scrollOffset <= upperThresholdScrollTop) {
+        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)
             this.pub(RootEvents.ReachUpperThreshold);
-        }
-        if (scrollDirection === 'forward' &&
-            this.lowerThresholdCount !== Infinity &&
-            scrollOffset + containerSize.height >= this.lowerThresholdScrollTop) {
+        if (inLower && !this._inLowerZone)
             this.pub(RootEvents.ReachLowerThreshold);
-        }
+        this._inUpperZone = inUpper;
+        this._inLowerZone = inLower;
+    }
+    /**
+     * 列表追加并完成 finalize 后调用：重置触底边沿状态（_inLowerZone），
+     * 使用户仍在底部时下一次滚动能再次触发 onScrollToLower，而不必先上滑再下滑。
+     * 不在此处同步调用 handleReachThreshold，避免仍在底部时立刻连发触底（与误触区分）。
+     */
+    resetLowerReachEdgeAfterContentChange() {
+        this._inLowerZone = false;
     }
     /**
      * 容器的滚动上边界
@@ -273,21 +304,44 @@ 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];
-            range[i] = [previous[1], previous[1] + this.sections[i].maxColumnHeight];
+            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];
         }
         return range;
     }
     /**
-     * 计算滚动高度
+     * 更新总滚动高度（各 Section 累计）。
+     * @param immediate true 时跳过 raf 防抖（如 finalizePushNodesStateIfNeeded），避免高度滞后引起跳动
      */
-    updateScrollHeight() {
-        this.setStateIn('scrollHeight', this.sectionRange[this.sectionRange.length - 1][1]);
+    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();
+        });
     }
     /**
      * 注册分组
@@ -315,6 +369,23 @@ 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());
+            }
+        }
+    }
     /**
      * 获取分组渲染区间
      */
@@ -333,15 +404,16 @@ 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 = scrollDirection === 'backward' ? backwardCache : 0;
-        const forwardDistance = scrollDirection === 'forward' ? forwardCache : 0;
+        // 双向预缓存，避免反向滚动时出现空白（原逻辑仅在滚动方向缓存，反向时未预渲染）
+        const backwardDistance = backwardCache;
+        const forwardDistance = forwardCache;
         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;
-        return isSameRenderRange(result, this.getState().renderRange) ? this.getState().renderRange : result;
+        const prevRange = this.getState().renderRange;
+        return isSameRenderRange(result, prevRange) ? prevRange : result;
     }
     /**
      * 计算预渲染的分组个数