pixuireactcomponents 1.3.54 → 1.3.56

package/index.d.ts

@@ -10,5 +10,7 @@ export { OutlineText } from "./src/components/react/base/outlinetext/OutlineText
 export { FrameAnimation } from "./src/components/react/app/frameAnimation/FrameAnimation";
 export { AsyncTaskProcessor } from "./src/components/tools/AsyncTaskProcessor";
 export { assetCache } from "./src/components/tools/assetCache";
+export { frameAnimationJs } from "./src/components/js/frameAnimationJs/frameAnimationJs";
+export { ScrollBar } from "./src/components/react/app/scrollBar/ScrollBar";
 export { Slider, SliderProps } from "./src/components/react/app/slider/Slider";
 export { ImgPreLoader, PreLoadPic } from "./src/components/tools/ImgPreLoader";

package/index.js

@@ -13,3 +13,5 @@ export { FrameAnimation } from './src/components/react/app/frameAnimation/FrameA
 export { ImgPreLoader, PreLoadPic } from './src/components/tools/ImgPreLoader';
 export { AsyncTaskProcessor } from './src/components/tools/AsyncTaskProcessor';
 export { assetCache } from './src/components/tools/assetCache';
+export { frameAnimationJs } from './src/components/js/frameAnimationJs/frameAnimationJs';
+export { ScrollBar } from './src/components/react/app/scrollBar/ScrollBar';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.3.54",
+    "version": "1.3.56",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

package/src/components/js/frameAnimationJs/frameAnimationJs.d.ts

@@ -0,0 +1,46 @@
+/**
+ * FrameAnimation的js版本
+ * @param rootId 根节点id
+ * @param rootClassName 根节点className
+ * @param totalTime 动画总时长
+ * @param width 组件宽度
+ * @param height 组件高度
+ * @param srcArr 图片url数组
+ * @param onShow 每一帧显示时的回调
+ * @param onFinish 动画结束时的回调
+ * @param preloadCount 预加载节点的数量
+ * @param loop 是否循环播放
+ * @param showLastFrame 播放结束后是否显示最后一帧
+ */
+export class frameAnimationJs {
+    constructor({ rootId, rootClassName, totalTime, width, height, srcArr, onShow, onFinish, preloadCount, loop, showLastFrame, }: {
+        rootId?: string | undefined;
+        rootClassName?: string | undefined;
+        totalTime: any;
+        width: any;
+        height: any;
+        srcArr: any;
+        onShow: any;
+        onFinish: any;
+        preloadCount?: number | undefined;
+        loop?: boolean | undefined;
+        showLastFrame?: boolean | undefined;
+    });
+    rootId: string;
+    rootClassName: string;
+    totalTime: any;
+    width: any;
+    height: any;
+    srcArr: any;
+    onShow: any;
+    onFinish: any;
+    preloadCount: number;
+    loop: boolean;
+    showLastFrame: boolean;
+    cRefArr: HTMLImageElement[];
+    imgEleArr: HTMLImageElement[];
+    nextFrame(startTime: any, oneFrameTime: any, showedFrame: any): void;
+    rootEle: HTMLDivElement;
+    init(): void;
+    getRootEle(): HTMLDivElement;
+}

package/src/components/js/frameAnimationJs/frameAnimationJs.js

@@ -0,0 +1,125 @@
+/**
+ * FrameAnimation的js版本
+ * @param rootId 根节点id
+ * @param rootClassName 根节点className
+ * @param totalTime 动画总时长
+ * @param width 组件宽度
+ * @param height 组件高度
+ * @param srcArr 图片url数组
+ * @param onShow 每一帧显示时的回调
+ * @param onFinish 动画结束时的回调
+ * @param preloadCount 预加载节点的数量
+ * @param loop 是否循环播放
+ * @param showLastFrame 播放结束后是否显示最后一帧
+ */
+var frameAnimationJs = /** @class */ (function () {
+    function frameAnimationJs(_a) {
+        var _b = _a.rootId, rootId = _b === void 0 ? '' : _b, _c = _a.rootClassName, rootClassName = _c === void 0 ? '' : _c, totalTime = _a.totalTime, width = _a.width, height = _a.height, srcArr = _a.srcArr, onShow = _a.onShow, onFinish = _a.onFinish, _d = _a.preloadCount, preloadCount = _d === void 0 ? 5 : _d, _e = _a.loop, loop = _e === void 0 ? false : _e, _f = _a.showLastFrame, showLastFrame = _f === void 0 ? true : _f;
+        var _this = this;
+        this.rootId = rootId;
+        this.rootClassName = rootClassName;
+        this.totalTime = totalTime;
+        this.width = width;
+        this.height = height;
+        this.srcArr = srcArr;
+        this.onShow = onShow;
+        this.onFinish = onFinish;
+        this.preloadCount = preloadCount;
+        this.loop = loop;
+        this.showLastFrame = showLastFrame;
+        this.cRefArr = Array.from({ length: preloadCount }, function () { return document.createElement('img'); });
+        this.imgEleArr = Array.from({ length: preloadCount }, function (v, i) {
+            _this.cRefArr[i].src = _this.srcArr[i];
+            _this.cRefArr[i].style.position = 'absolute';
+            _this.cRefArr[i].style.visibility = 'hidden';
+            _this.cRefArr[i].style.width = _this.width;
+            _this.cRefArr[i].style.height = _this.height;
+            return _this.cRefArr[i];
+        });
+        this.nextFrame = this.nextFrame.bind(this);
+        this.rootEle = document.createElement('div');
+        console.log('ccc');
+        this.init();
+    }
+    frameAnimationJs.prototype.init = function () {
+        var _this = this;
+        this.rootEle.style.width = this.width;
+        this.rootEle.style.height = this.height;
+        this.rootEle.id = this.rootId;
+        this.rootEle.className = this.rootClassName;
+        this.imgEleArr.forEach(function (ele) {
+            _this.rootEle.appendChild(ele);
+        });
+        var startTime = Date.now();
+        var oneFrameTime = this.totalTime / this.srcArr.length;
+        //设置第一帧
+        this.cRefArr[0].style.visibility = 'visible';
+        this.nextFrame(startTime, oneFrameTime, 0);
+    };
+    //循环修改imgEleArr的src和visibility实现帧动画,，记录上一帧的序号防止跳帧
+    frameAnimationJs.prototype.nextFrame = function (startTime, oneFrameTime, showedFrame) {
+        var _this = this;
+        var nowTime = Date.now();
+        //该显示第几帧
+        var nowFrame = Math.floor((nowTime - startTime) / oneFrameTime);
+        //使用第几个img元素
+        var nowArrIndex = nowFrame % this.preloadCount;
+        var showedArrIndex = showedFrame % this.preloadCount;
+        // console.log('nextFrame', nowFrame, 'nowArrIndex', nowArrIndex, 'nowFrame', nowFrame);
+        if (!this.cRefArr[0]) {
+            //组件已经被卸载
+            this.onFinish && this.onFinish();
+            return;
+        }
+        if (nowFrame >= this.srcArr.length) {
+            this.onFinish && this.onFinish();
+            if (!this.loop) {
+                this.cRefArr.forEach(function (ref, i) {
+                    ref.style.visibility = 'hidden';
+                });
+                if (this.showLastFrame) {
+                    //跳帧的话，最后一帧可能不是最后一张图片，设为最后一张图片
+                    this.cRefArr[0].src = this.srcArr[this.srcArr.length - 1];
+                    this.cRefArr[0].style.visibility = 'visible';
+                }
+                return;
+            }
+            //重置img标签的 src 和 visibility
+            this.cRefArr.forEach(function (ref, i) {
+                ref.style.visibility = 'hidden';
+                ref.src = _this.srcArr[i];
+            });
+            startTime = Date.now();
+            this.cRefArr[0].style.visibility = 'visible';
+            requestAnimationFrame(function () {
+                _this.nextFrame(startTime, oneFrameTime, 0);
+            });
+            return;
+        }
+        if (nowFrame !== showedFrame) {
+            this.cRefArr[nowArrIndex].style.visibility = 'visible';
+            //隐藏上一帧
+            this.cRefArr[showedArrIndex].style.visibility = 'hidden';
+            //可能跳帧，在所有其他的元素上预加载
+            this.cRefArr.forEach(function (ref, i) {
+                if (i !== nowArrIndex) {
+                    var offset = (i + _this.cRefArr.length - nowArrIndex) % _this.cRefArr.length;
+                    var offsetFrame = (nowFrame + offset) % _this.srcArr.length;
+                    if (ref.src !== _this.srcArr[offsetFrame]) {
+                        ref.src = _this.srcArr[offsetFrame];
+                    }
+                }
+            });
+            showedFrame = nowFrame;
+            this.onShow && this.onShow(nowFrame);
+        }
+        requestAnimationFrame(function () {
+            _this.nextFrame(startTime, oneFrameTime, showedFrame);
+        });
+    };
+    frameAnimationJs.prototype.getRootEle = function () {
+        return this.rootEle;
+    };
+    return frameAnimationJs;
+}());
+export { frameAnimationJs };

package/src/components/react/app/carousel/Carousel.js

@@ -105,7 +105,7 @@ export function Carousel(props) {
     var safePrevHandle = useRef();
     var nextInterval = useRef();
     var _q = useState(true), showTransition = _q[0], setShowTransition = _q[1];
-    var _r = useState([0, 0]), gesteroffset = _r[0], setGesteroffset = _r[1];
+    var _r = useState([0, 0]), gestureoffset = _r[0], setGestureoffset = _r[1];
     var offset = useMemo(function () { return -(isVertical ? compHeight : compWidth) * showIndex; }, [showIndex]);
     var itemBoxStyle = {
         minWidth: compWidth + 'px',
@@ -156,6 +156,7 @@ export function Carousel(props) {
             safePrevHandle.current && clearTimeout(safePrevHandle.current);
         });
         return function () {
+            console.log('Carousel useEffect close');
             nextInterval.current && clearInterval(nextInterval.current);
             safeNextHandle.current && clearTimeout(safeNextHandle.current);
             safePrevHandle.current && clearTimeout(safePrevHandle.current);
@@ -210,22 +211,22 @@ export function Carousel(props) {
         isMouseDown.current = false;
         //拖动大于1/3的时候跳转
         if (isVertical) {
-            if (gesteroffset[1] > compHeight / 3) {
+            if (gestureoffset[1] > compHeight / 3) {
                 handlePrev();
             }
-            else if (gesteroffset[1] < -compHeight / 3) {
+            else if (gestureoffset[1] < -compHeight / 3) {
                 handleNext();
             }
         }
         else {
-            if (gesteroffset[0] > compWidth / 3) {
+            if (gestureoffset[0] > compWidth / 3) {
                 handlePrev();
             }
-            else if (gesteroffset[0] < -compWidth / 3) {
+            else if (gestureoffset[0] < -compWidth / 3) {
                 handleNext();
             }
         }
-        setGesteroffset([0, 0]);
+        setGestureoffset([0, 0]);
         setNextInterval();
     };
     var gestureMove = function (e) {
@@ -240,7 +241,7 @@ export function Carousel(props) {
         var b = rect.bottom;
         var x = e.clientX;
         var y = e.clientY;
-        setGesteroffset([e.clientX - mouseDownX.current, e.clientY - mouseDownY.current]);
+        setGestureoffset([e.clientX - mouseDownX.current, e.clientY - mouseDownY.current]);
         //计算滑动超出元素范围
         if (x < l || x > r || y > b || y < t) {
             gestureUp();
@@ -289,7 +290,9 @@ export function Carousel(props) {
                         width: isVertical ? compWidth : compWidth * carouselItems.length + 'px',
                         height: isVertical ? compHeight * carouselItems.length : compHeight + 'px',
                         transition: "transform ".concat(showTransition ? '0.5s' : '0s', " ease 0s"),
-                        transform: isVertical ? "translate(0px, ".concat(offset + gesteroffset[1], "px)") : "translate(".concat(offset + gesteroffset[0], "px, 0px)"),
+                        transform: isVertical
+                            ? "translate(0px, ".concat(offset + gestureoffset[1], "px)")
+                            : "translate(".concat(offset + gestureoffset[0], "px, 0px)"),
                         flexDirection: isVertical ? 'column' : 'row',
                         flexShrink: 0,
                     }, class: "wrapper", onTransitionEnd: handleTransitionEnd }, carouselItems.map(function (child) { return child; }))))));

package/src/components/react/app/carouselMulti/CarouselMulti.d.ts

@@ -0,0 +1,17 @@
+import { h } from 'preact';
+export declare let CarouselMulti: (props: {
+    rootId?: string | undefined;
+    rootClassName?: string | undefined;
+    extShowCount: number;
+    extShowDist: {
+        num: number;
+        unit: 'px' | '%' | 'rem';
+    };
+    animationTime?: number | undefined;
+    maxScale?: number | undefined;
+    minOpacity?: number | undefined;
+    onClick?: ((index: number) => void) | undefined;
+    onIndexChange?: ((index: number) => void) | undefined;
+    cRef?: any;
+    children: h.JSX.Element[];
+}) => h.JSX.Element | null;

package/src/components/react/app/carouselMulti/CarouselMulti.js

@@ -0,0 +1,172 @@
+import { h } from 'preact';
+import { useImperativeHandle, useState, useRef, useEffect } from 'preact/hooks';
+export var CarouselMulti = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var extShowCount = props.extShowCount, extShowDist = props.extShowDist, rootId = (_a = props.rootId, _a === void 0 ? '' : _a), rootClassName = (_b = props.rootClassName, _b === void 0 ? '' : _b), animationTime = (_c = props.animationTime, _c === void 0 ? 500 : _c), maxScale = (_d = props.maxScale, _d === void 0 ? 1.5 : _d), minOpacity = (_e = props.minOpacity, _e === void 0 ? 0.5 : _e), onClick = props.onClick, 
+    // fillAndLoop = true,
+    onIndexChange = props.onIndexChange;
+    //元素不足extShowCount*2+3时，复制原数组到可以播放动画的长度
+    var children = (function () {
+        var preChildren = props.children;
+        // if (fillAndLoop) {
+        if (preChildren.length == 0) {
+            return [];
+        }
+        while (preChildren.length < extShowCount * 2 + 3) {
+            preChildren = preChildren.concat(props.children);
+        }
+        // }
+        return preChildren;
+    })();
+    var onload = (_f = useState(false), _f[0]), setOnload = _f[1];
+    var zIndexArr = (_g = useState(Array.from({ length: children.length }).map(function () { return 0; })), _g[0]), setZIndexArr = _g[1];
+    var opacitiyArr = (_h = useState(Array.from({ length: children.length }).map(function () { return 0; })), _h[0]), setOpacitiyArr = _h[1];
+    var showIndex = (_j = useState(Math.floor((props.children.length - 1) / 2)), _j[0]), setShowIndex = _j[1];
+    //用于填入 style 的距离
+    var getDist = function (num) {
+        return num + extShowDist.unit;
+    };
+    var dragX = useRef(0);
+    var isDraging = useRef(false);
+    var getMinDist = function (_index, _showindex) { return Math.min(Math.abs(_index - _showindex), children.length - Math.abs(_index - _showindex)); };
+    var getLeft = function (index) {
+        //计算元素的left，间隔为extShowDist.num，以showIndex为中心，左右两边各显示extShowCount个元素，余下的元素按数组首尾相接的顺序计算 zindex
+        var left = -1;
+        var minDist = getMinDist(index, showIndex);
+        if (index == showIndex) {
+            left = extShowCount;
+        }
+        else if (minDist <= extShowCount) {
+            //需要展示
+            if (index < showIndex) {
+                if (Math.abs(index - showIndex) <= extShowCount) {
+                    //没跨边界
+                    left = extShowCount - minDist;
+                }
+                else {
+                    left = extShowCount + minDist;
+                }
+            }
+            else if (index > showIndex) {
+                if (Math.abs(index - showIndex) <= extShowCount) {
+                    //没跨边界
+                    left = extShowCount + minDist;
+                }
+                else {
+                    left = extShowCount - minDist;
+                }
+            }
+        }
+        else {
+            //盖在下面的元素，计算放到哪边
+            if (Math.abs(index - showIndex + children.length) % children.length <= Math.abs(showIndex - index + children.length) % children.length) {
+                left = extShowCount * 2;
+            }
+            else {
+                left = 0;
+            }
+        }
+        return left * extShowDist.num;
+    };
+    var onTransitionEnd = function (ev) { };
+    useEffect(function () {
+        onIndexChange && onIndexChange(showIndex);
+    }, [showIndex]);
+    useImperativeHandle(props.cRef, function () { return ({
+        switchNext: function () {
+            changeShowIndex((showIndex + 1) % children.length);
+        },
+        switchPre: function () {
+            changeShowIndex((showIndex - 1 + children.length) % children.length);
+        },
+    }); });
+    //按离中间元素的距离计算 zindex、scale、opacity
+    var getZIndex = function (index, showIndex) {
+        var topIndex = 99999;
+        var baseIndex = topIndex - getMinDist(index, showIndex);
+        return baseIndex;
+    };
+    var getOpacity = function (index, showIndex) {
+        var topOpacity = 1;
+        var baseOpacity = minOpacity;
+        //getMinDist越大，越靠近中间，透明度越高
+        return Math.max(baseOpacity + ((topOpacity - baseOpacity) * (extShowCount - getMinDist(index, showIndex))) / extShowCount, baseOpacity);
+    };
+    var getScale = function (index) {
+        var topScale = maxScale;
+        var baseScale = 1;
+        return Math.max(baseScale + ((topScale - baseScale) * (extShowCount - getMinDist(index, showIndex))) / extShowCount, baseScale);
+    };
+    useEffect(function () {
+        if (children.length == 0) {
+            return;
+        }
+        //计算修改完元素的属性再显示
+        setEleStyle(showIndex);
+        setOnload(true);
+    }, []);
+    var setEleStyle = function (index) {
+        //更新元素的zIndex和opacity
+        var newZIndexArr = Array.from({ length: children.length }).map(function () { return 0; });
+        children.forEach(function (_, _index) {
+            newZIndexArr[_index] = getZIndex(index, _index);
+        });
+        setZIndexArr(newZIndexArr);
+        var newOpacityArr = Array.from({ length: children.length }).map(function () { return 1; });
+        children.forEach(function (_, _index) {
+            newOpacityArr[_index] = getOpacity(index, _index);
+        });
+        setOpacitiyArr(newOpacityArr);
+    };
+    var changeShowIndex = function (index) {
+        if (index >= 0 && index < children.length) {
+            setShowIndex(index);
+            setTimeout(function () {
+                setEleStyle(index);
+            }, animationTime * 0.4);
+        }
+    };
+    return onload ? (h("div", { id: rootId, className: rootClassName, style: { flexDirection: 'column' }, onDrag: function (ev) {
+            if (!isDraging.current) {
+                return;
+            }
+            //在外层接受 drag 事件，触发切换动作
+            if (ev.clientX - dragX.current > 100) {
+                console.log('drag right');
+                changeShowIndex((showIndex - 1 + children.length) % children.length);
+                isDraging.current = false;
+            }
+            else if (ev.clientX - dragX.current < -100) {
+                console.log('drag left');
+                changeShowIndex((showIndex + 1) % children.length);
+                isDraging.current = false;
+            }
+        }, onDragStart: function (ev) {
+            isDraging.current = true;
+            dragX.current = ev.clientX;
+        }, onDragEnd: function (ev) {
+            isDraging.current = false;
+        }, draggable: true }, children.map(function (child, index) {
+        return (h("div", { ref: function (ele) {
+                if (ele) {
+                    //绕过 pixui 初始化设置zIndex 和 opcity 后 transform 错误的问题
+                    // ele.style.transform = `translate(${getDist(getLeft(index) + 1)},0rem) scale(${getScale(index)})`;
+                    ele.style.transition = "transform ".concat(animationTime, "ms");
+                }
+            }, 
+            /**
+             * child数组首尾相接，拼成一个环，除了显示的 extShowCount*2+1 个元素，其余元素分别放到最左和最右，按离中间元素的距离计算 zindex 和 scale
+             * 用getLeft函数统一计算每个元素当前的left值，pixui 不支持zIndex和opacity动画，直接在播放过程中setstate改变元素的zIndex和opacity值
+             */
+            style: {
+                position: 'absolute',
+                transform: "translate(".concat(getDist(getLeft(index)), ",0px) scale(").concat(getScale(index), ")"),
+                zIndex: zIndexArr[index] || 0,
+                opacity: opacitiyArr[index] || 1,
+            }, onClick: function (ev) {
+                changeShowIndex(index);
+                onClick && onClick(index);
+                ev.stopPropagation();
+            } }, child));
+    }))) : null;
+};

package/src/components/react/app/newsTicker/NewsTicker.d.ts

@@ -0,0 +1,9 @@
+import { h } from 'preact';
+export declare let NewsTicker: (props: {
+    rootId?: string | undefined;
+    rootClassName: string;
+    content: string;
+    totalTime: number;
+    onEnd?: (() => void) | undefined;
+    repeatTimes?: number | undefined;
+}) => h.JSX.Element;

package/src/components/react/app/newsTicker/NewsTicker.js

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { h } from 'preact';
+export var NewsTicker = function (props) {
+    var _a, _b;
+    var rootId = props.rootId, rootClassName = props.rootClassName, content = props.content, totalTime = props.totalTime, onEnd = props.onEnd, repeatTimes = (_a = props.repeatTimes, _a === void 0 ? 1 : _a);
+    // const [left, setLeft] = useState(0);
+    var moveDistance = (_b = useState(0), _b[0]), setMoveDistance = _b[1];
+    var contentRef = useRef(null);
+    var frameRef = useRef(null);
+    useEffect(function () {
+        var contentWidth = contentRef.current.clientWidth || 0;
+        var frameWidth = frameRef.current.clientWidth || 0;
+        var moveDistance = Math.max(contentWidth - frameWidth, 0);
+        setMoveDistance(moveDistance);
+    }, []);
+    var onTransitionEnd = function () {
+        onEnd && onEnd();
+    };
+    var repeatContent = function () {
+        var repeatContent = '';
+        for (var i = 0; i < repeatTimes; i++) {
+            repeatContent += content;
+        }
+        console.log('repeatContent', repeatContent);
+        return repeatContent;
+    };
+    return (h("div", { id: rootId, className: rootClassName, style: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '100%',
+            position: 'relative',
+        }, ref: frameRef },
+        h("div", { ref: contentRef, style: {
+                position: 'absolute',
+                // transition: `left ${totalTime}s linear`,
+                transition: "transform ".concat(totalTime, "s linear"),
+                // transform: `translate(-100%, 0)`,
+                transform: "translateX(-".concat(moveDistance, ")"),
+            }, onTransitionEnd: onTransitionEnd }, repeatContent())));
+};

package/src/components/react/app/scrollBar/ScrollBar.d.ts

@@ -0,0 +1,6 @@
+/**
+ * + [已解决]为什么重新创建 CustomScrollBar()时 isDragingSBlock 会被重置为false？ 在外部回调中不能使用state
+ *
+ */
+import { h } from 'preact';
+export declare function ScrollBar(props: any): h.JSX.Element;

package/src/components/react/app/scrollBar/ScrollBar.js

@@ -0,0 +1,134 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/**
+ * + [已解决]为什么重新创建 CustomScrollBar()时 isDragingSBlock 会被重置为false？ 在外部回调中不能使用state
+ *
+ */
+import { h } from 'preact';
+import styles from './ScrollBar.module.less';
+import { useState, useEffect } from 'preact/hooks';
+var sWindow; // 滚动窗口
+var sBlock; // 滚动条
+var sFrame; // 滚动条外框
+var isDragingSBlock = false;
+var clientYtoBlockTop = 0; //鼠标Y坐标距离滑块top, 记录这个值是为了记住拖动位置和滑块的偏移，并在后续滑动时保持这个偏移
+export function ScrollBar(props) {
+    var _a = useState(0), sBlockY = _a[0], setSBlockY = _a[1]; // sBlock的Top值, block顶部相对于frames上边的差值
+    var _b = useState({}), sBlockStyle = _b[0], setSBlockStyle = _b[1];
+    var _c = useState({}), sFrameStyle = _c[0], setSFrameStyle = _c[1];
+    setSFrameStyle(props.style);
+    useEffect(function () {
+        // 初始化的 useEffect，其中只能添加初始化方法
+        setTimeout(function () {
+            // pixui限制，必须异步获取元素，也可以用userRef, 但效率似乎不如初始化时查找
+            if (!props.scrollWindowRef) {
+                console.warn('[CustomScrollBar][Error] 未设置 scrollWindowRef!');
+                return;
+            }
+            sWindow = props.scrollWindowRef.current;
+            sBlock = document.getElementById('sblock');
+            sFrame = document.getElementById('sframe');
+            if (!sWindow) {
+                console.warn('[CustomScrollBar][Error] 未找到sWindow，请确认设置的scrollWindowRef是否正确!');
+                return;
+            }
+            if (!sBlock || !sFrame) {
+                console.warn('[CustomScrollBar][Error] 内部错误，无法找到 sBlock 或 sFrame!');
+                return;
+            }
+            sWindow === null || sWindow === void 0 ? void 0 : sWindow.addEventListener('scroll', sWindowScrolling);
+            // 设置背景图
+            sBlock.style.backgroundImage = "url(".concat(props.sBlockImgNormal, ")");
+            sFrame.style.backgroundImage = "url(".concat(props.sFrameImgNormal, ")");
+            sBlock.addEventListener('mousedown', function () {
+                sBlock.style.backgroundImage = "url(".concat(props.sBlockImgClick, ")");
+                sFrame.style.backgroundImage = "url(".concat(props.sFrameImgClick, ")");
+            });
+            sBlock.addEventListener('mouseup', function () {
+                sBlock.style.backgroundImage = "url(".concat(props.sBlockImgNormal, ")");
+                sFrame.style.backgroundImage = "url(".concat(props.sFrameImgNormal, ")");
+            });
+        }, 1);
+        // 释放时删除监听
+        return function () {
+            sWindow === null || sWindow === void 0 ? void 0 : sWindow.removeEventListener('scroll', sWindowScrolling);
+        };
+    }, []);
+    useEffect(function () {
+        setSBlockStyle(function (prevStyle) { return (__assign(__assign({}, props.blockStyle), { marginTop: sBlockY })); });
+    }, [sBlockY, props.blockStyle]);
+    // 页面滑动时，滑块也跟着移动
+    var sWindowScrolling = function (event) {
+        if (isDragingSBlock) {
+            // 这个事件是处理窗口滚动的。如果是拖动滑块，则不处理事件。否则会造成死循环。
+            return;
+        }
+        // 页面滑动时，同步带动滑块移动
+        if (sBlock && sWindow && sFrame) {
+            var sblock_height = sBlock.getBoundingClientRect().height; // 滑块高
+            var sframe_height = sFrame.getBoundingClientRect().height; // 滑块顶部距离父元素高度
+            var swindow_height = sWindow.getBoundingClientRect().height; // 滑动窗口高
+            var content_scrollTop = sWindow.scrollTop; // 窗口顶部距离内容顶部的高度
+            var content_height = sWindow.scrollHeight;
+            var rate = content_scrollTop / (content_height - swindow_height); //当前滑动比例
+            var sblock_top_to_sframe = rate * (sframe_height - sblock_height);
+            if (sblock_top_to_sframe < 0) {
+                setSBlockY(0);
+            }
+            else if (sblock_top_to_sframe > sframe_height - sblock_height) {
+                setSBlockY(sframe_height - sblock_height);
+            }
+            else {
+                setSBlockY(sblock_top_to_sframe);
+            }
+        }
+    };
+    // 拖动滑块时，页面跟着移动
+    var sBlockScrolling = function (event) {
+        if (event.clientY - clientYtoBlockTop < sFrame.getBoundingClientRect().top) {
+            // 超出上边界,滑动到顶
+            setSBlockY(0);
+        }
+        else if (event.clientY - clientYtoBlockTop + sBlock.getBoundingClientRect().height > sFrame.getBoundingClientRect().bottom) {
+            // 超出下边界，滑动到底
+            setSBlockY(sFrame.getBoundingClientRect().height - sBlock.getBoundingClientRect().height);
+        }
+        else {
+            setSBlockY(
+            // 滑块顶部距离sframe上边的差值 = 鼠标Y位置 - 鼠标Y距离元素顶部位置 - 滚动框绝对top
+            event.clientY - clientYtoBlockTop - sFrame.getBoundingClientRect().top);
+        }
+        {
+            //移动 content
+            var sblock_height = sBlock.getBoundingClientRect().height;
+            var sframe_height = sFrame.getBoundingClientRect().height;
+            var swindow_height = sWindow.getBoundingClientRect().height;
+            var content_height = sWindow.scrollHeight;
+            var slideMarginTop = sBlock.getBoundingClientRect().top - sFrame.getBoundingClientRect().top;
+            var rate = slideMarginTop / (sframe_height - sblock_height);
+            var content_scrollTop = (content_height - swindow_height) * rate;
+            sWindow.scrollTop = content_scrollTop;
+        }
+    };
+    return (h("div", { id: "sframe", className: styles.main, style: sFrameStyle },
+        h("div", { id: "sblock", className: styles.slideBlock, style: sBlockStyle, draggable: true, onDragStart: function (event) {
+                sBlock.style.backgroundImage = "url(".concat(props.sBlockImgClick, ")");
+                sFrame.style.backgroundImage = "url(".concat(props.sFrameImgClick, ")");
+                //@ts-ignore
+                clientYtoBlockTop = event.clientY - event.target.getBoundingClientRect().top;
+                isDragingSBlock = true;
+            }, onDragEnd: function (event) {
+                isDragingSBlock = false;
+                sBlock.style.backgroundImage = "url(".concat(props.sBlockImgNormal, ")");
+                sFrame.style.backgroundImage = "url(".concat(props.sFrameImgNormal, ")");
+            }, onDrag: sBlockScrolling })));
+}