@arco-design/mobile-react 2.27.1 → 2.27.3

package/dist/index.js

@@ -3662,6 +3662,13 @@
       }, {});
       return newStyle;
     }
+    function setStyleWithVendor(dom, style) {
+      var vendorStyle = getStyleWithVendor(style);
+
+      for (var key in vendorStyle) {
+        dom.style[key] = vendorStyle[key];
+      }
+    }
     /**
      * 计算默认值，仅未定义时使用默认值
      * @desc {en} Calculate the default value, use default value only if undefined
@@ -15205,6 +15212,18 @@
 
     var listeners = {};
     var onOnceEmittedListeners = {};
+    /**
+     * Intersection Observer 同一 root 节点下的监听队列
+     * @en Intersection Observer Listening queue under the same root node
+     */
+
+    var ioListeners = [];
+    /**
+     * Intersection Observer 监听 visible 状态队列
+     * @en Intersection Observer listens to the visible status queue
+     */
+
+    var ioVisibleList = [];
     var throttlingVisibleChange;
     /**
      * 通过滚动事件监测 children 是否进入视口或离开视口。
@@ -15252,12 +15271,6 @@
        */
 
       var domRefParent = React.useRef(null);
-      /**
-       * 当前元素是否在可视区域内
-       * @en Whether the current element is in the visible area
-       */
-
-      var isVisible = React.useRef(false);
       /**
        * 保存当前节点信息，类似于 class component 中 this
        * @en Save current node information, similar to this in class component
@@ -15304,10 +15317,8 @@
            * @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
            */
           flushVisibleStatus: function flushVisibleStatus() {
-            isVisible.current = false;
-
-            if (isSupportNativeApi && io.current && domRef.current) {
-              disabled ? io.current.unobserve(domRef.current) : io.current.observe(domRef.current);
+            if (isSupportNativeApi) {
+              disabled ? ioUnobserve() : ioObserve();
             } else if (listener.current) {
               var key = wrapperKey.current;
 
@@ -15371,7 +15382,7 @@
          */
 
 
-        curVisible !== preVisible.current && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
+        curVisible !== preVisible && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
         var key = wrapperKey.current;
         /**
          * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉
@@ -15387,8 +15398,7 @@
          */
 
 
-        curVisible && !preVisible.current && compOnce && onOnceEmittedListeners[key].push(component);
-        preVisible.current = curVisible;
+        curVisible && !preVisible && compOnce && onOnceEmittedListeners[key].push(component);
       }
 
       var checkVisibleHandler = React.useCallback(function () {
@@ -15408,22 +15418,98 @@
       }
 
       function handleObserverStatusChange(entries) {
-        var _a;
+        entries.forEach(function (entry) {
+          var isIntersecting = entry.isIntersecting,
+              target = entry.target;
+          var visibleItem = ioVisibleList.find(function (item) {
+            return item.node === target;
+          });
 
-        var isIntersecting = entries[0].isIntersecting;
-        /**
-         * 当前元素 visible 对比之前发生改变，触发回调函数
-         * @en Callback when the visible status of current element changes before the comparison
-         */
+          if (visibleItem) {
+            var curVisible = visibleItem.isVisible,
+                onCompVisibleChange = visibleItem.onVisibleChange,
+                onceEmit = visibleItem.once;
+            /**
+             * 当前元素 visible 对比之前发生改变，触发回调函数
+             * @en Callback when the visible status of current element changes before the comparison
+             */
 
-        isIntersecting !== isVisible.current && handleCheckChildrenExist() && onVisibleChange(isIntersecting, domRef.current);
-        /**
-         * 当前元素不可见 -> 可见，且 once, 触发回调函数
-         * @en The current element is invisible -> visible, and once, triggers the callback
-         */
+            isIntersecting !== curVisible && handleCheckChildrenExist() && onCompVisibleChange(isIntersecting, target);
+            /**
+             * 当前元素状态由不可见变为可见，且只触发一次
+             * @en The current element is invisible -> visible, and once, triggers the callback
+             */
+
+            isIntersecting && !curVisible && onceEmit && target && ioUnobserve(target);
+            visibleItem.isVisible = isIntersecting;
+          }
+        });
+      }
+      /**
+       * 获取 io 单例
+       * @en Get the io singleton
+       */
+
+
+      function getIOSingleton(ioOptions) {
+        var root = ioOptions.root,
+            rootMargin = ioOptions.rootMargin,
+            ioThreshold = ioOptions.threshold;
+        var ioKey = JSON.stringify({
+          rootMargin: rootMargin,
+          threshold: ioThreshold
+        });
+
+        var _ioListener = ioListeners.find(function (ioListener) {
+          return ioListener.root === root && ioListener.key === ioKey;
+        });
 
-        isIntersecting && !isVisible.current && once && domRef.current && ((_a = io.current) === null || _a === void 0 ? void 0 : _a.unobserve(domRef.current));
-        isVisible.current = isIntersecting;
+        if (!_ioListener) {
+          ioListeners.push({
+            root: root,
+            key: ioKey,
+            listener: io.current = new IntersectionObserver(handleObserverStatusChange, ioOptions)
+          });
+        } else {
+          io.current = _ioListener.listener;
+        }
+      }
+
+      function ioObserve() {
+        if (domRef.current && io.current) {
+          var curIdx = ioVisibleList.findIndex(function (ioVisibleItem) {
+            return ioVisibleItem.node === domRef.current;
+          });
+
+          if (curIdx !== -1) {
+            ioVisibleList[curIdx].isVisible = false;
+          } else {
+            ioVisibleList.push({
+              node: domRef.current,
+              isVisible: false,
+              once: once,
+              onVisibleChange: onVisibleChange
+            });
+          }
+
+          io.current.observe(domRef.current);
+        }
+      }
+
+      function ioUnobserve(target) {
+        var targetNode = target || domRef.current;
+
+        if (io.current && targetNode) {
+          var curIdx = ioVisibleList.findIndex(function (ioVisibleItem) {
+            return ioVisibleItem.node === targetNode;
+          });
+
+          if (curIdx !== -1) {
+            ioVisibleList.splice(curIdx, 1);
+          }
+
+          io.current.unobserve(targetNode);
+        }
       }
       /**
        * 非首次下disabled变化时，重新监听元素
@@ -15433,14 +15519,11 @@
 
       React.useEffect(function () {
         if (isSupportNativeApi) {
-          // 非首次下
+          // 非首次 render 下
           // @en Not for the first time
-          if (io.current && domRef.current) {
-            // 禁用监听 || 监听
-            disabled ? io.current.unobserve(domRef.current) : io.current.observe(domRef.current);
-          }
+          disabled ? ioUnobserve() : ioObserve();
         } else {
-          // 非首次下
+          // 非首次 render 下
           // @en Not for the first time
           if (wrapperKey.current !== -1 && listener.current && listeners[wrapperKey.current]) {
             // 禁用监听，找到对应listener并删除
@@ -15504,12 +15587,12 @@
               rootMargin_1 = offset + "px";
             }
 
-            io.current = new IntersectionObserver(handleObserverStatusChange, {
+            getIOSingleton({
               root: root,
               rootMargin: rootMargin_1,
               threshold: threshold
             });
-            !disabled && io.current.observe(domRef.current);
+            !disabled && ioObserve();
           }
         } else {
           // 节流后回调函数
@@ -15553,7 +15636,7 @@
 
           listener.current = {
             node: domRef.current,
-            isVisible: isVisible,
+            isVisible: false,
             overflow: overflow,
             once: once,
             offset: offset,
@@ -15569,10 +15652,8 @@
       }, []);
       React.useEffect(function () {
         return function () {
-          var _a;
-
           if (isSupportNativeApi) {
-            domRef.current && ((_a = io.current) === null || _a === void 0 ? void 0 : _a.unobserve(domRef.current));
+            ioUnobserve();
           } else {
             if (overflow) {
               var parent_3 = domRefParent.current;
@@ -17403,7 +17484,7 @@
     var index$b = componentWrapper(ImagePicker, 'ImagePicker');
 
     /*!
-    * @arco-design/transformable v1.0.2
+    * @arco-design/transformable v1.0.1
     * (c) 2022 ludan.kibbon
     */
     function _defineProperty(obj, key, value) {
@@ -21550,11 +21631,14 @@
 
         changeStatus('loading', scene);
         getData === null || getData === void 0 ? void 0 : getData(function (st) {
-          lastScrollEndRef.current = false;
           changeStatus(st, 'manual');
         });
       }, [blockWhenLoading, changeStatus, getData]);
       React.useEffect(function () {
+        if (!blockWhenLoading || nowStatus !== 'loading') {
+          lastScrollEndRef.current = false;
+        }
+
         statusRef.current = nowStatus;
       }, [nowStatus]);
       useUpdateEffect(function () {
@@ -21811,7 +21895,7 @@
           ref: navBarRef,
           className: cls(wrapClass, prefixCls + "-nav-bar", (_b = {}, _b[prefixCls + "-nav-bar-fixed"] = fixed, _b[prefixCls + "-nav-bar-float"] = !placeholder, _b[prefixCls + "-nav-bar-hide"] = scrollToggleHide, _b)),
           style: __assign$2(__assign$2({
-            paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : ''
+            paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : '0px'
           }, style || {}), relBackground ? {
             background: relBackground
           } : {}),
@@ -21820,7 +21904,7 @@
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(className, system, prefixCls + "-nav-bar-wrapper", (_c = {}, _c[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _c[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _c)),
           style: __assign$2({
-            paddingTop: statusBarHeight ? statusBarHeight + "px" : ''
+            paddingTop: statusBarHeight ? statusBarHeight + "px" : '0px'
           }, customStyle)
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-nav-bar-inner all-border-box"
@@ -25903,31 +25987,49 @@
           _k = props.activeText,
           activeText = _k === void 0 ? '' : _k,
           _l = props.initPos,
-          initPos = _l === void 0 ? 0 : _l;
-      var _m = React.useContext(GlobalContext).locale,
-          locale = _m === void 0 ? defaultLocale : _m;
+          initPos = _l === void 0 ? 0 : _l,
+          _m = props.bounceWhenBumpBoundary,
+          bounceWhenBumpBoundary = _m === void 0 ? false : _m,
+          _o = props.bounceDampRate,
+          bounceDampRate = _o === void 0 ? 3 : _o,
+          _p = props.bounceAnimateDuration,
+          bounceAnimateDuration = _p === void 0 ? 300 : _p,
+          damping = props.damping,
+          bounceDistanceProcessor = props.bounceDistanceProcessor,
+          getScrollContainer = props.getScrollContainer,
+          getBounceContainer = props.getBounceContainer,
+          onTouchStart = props.onTouchStart,
+          onTouchEnd = props.onTouchEnd,
+          onTouchCancel = props.onTouchCancel,
+          onTouchMove = props.onTouchMove,
+          renderLabel = props.renderLabel;
+      var _q = React.useContext(GlobalContext).locale,
+          locale = _q === void 0 ? defaultLocale : _q;
 
-      var _o = React.useState(disabled),
-          disableState = _o[0],
-          setDisableState = _o[1];
+      var _r = React.useState(disabled),
+          disableState = _r[0],
+          setDisableState = _r[1];
 
-      var _p = React.useState(0),
-          labelOffsetState = _p[0],
-          setLabelOffsetState = _p[1];
+      var _s = React.useState(0),
+          labelOffsetState = _s[0],
+          setLabelOffsetState = _s[1];
 
       var containerRef = React.useRef(null);
       var loadingRef = React.useRef(null);
       var loadingLabelRef = React.useRef(null);
       var showLoadMoreRef = React.useRef(false);
       var ifToRightRef = React.useRef(false);
+      var bouncingRef = React.useRef(false);
       var offsetRef = React.useRef(0);
       var domRef = React.useRef(null);
       var wrapperEl = domRef.current;
-      useAddListener(wrapperEl, 'touchstart', props.onTouchStart);
-      useAddListener(wrapperEl, 'touchend', props.onTouchEnd);
-      useAddListener(wrapperEl, 'touchcancel', props.onTouchCancel);
-      useAddListener(wrapperEl, 'touchmove', props.onTouchMove);
+      useAddListener(wrapperEl, 'touchstart', onTouchStart);
+      useAddListener(wrapperEl, 'touchend', onTouchEnd);
+      useAddListener(wrapperEl, 'touchcancel', onTouchCancel);
+      useAddListener(wrapperEl, 'touchmove', onTouchMove);
       React.useEffect(function () {
+        var _a;
+
         if (disabled || !containerRef.current || disableState) {
           return;
         }
@@ -25942,11 +26044,7 @@
         } else if (containerRef.current.childNodes.length === 1) {
           // 传入一个子元素 滑动单个元素
           // @en Pass in a child element swipe the single element
-          if (props.getScrollContainer) {
-            scrollContainer = props.getScrollContainer();
-          } else {
-            scrollContainer = containerRef.current.firstChild;
-          }
+          scrollContainer = (_a = getScrollContainer === null || getScrollContainer === void 0 ? void 0 : getScrollContainer()) !== null && _a !== void 0 ? _a : containerRef.current.firstChild;
         } else {
           // 传入多个子元素(列表元素为例) 组件控制自行滑动 不推荐
           // @en Pass in multiple sub-elements (list elements as an example) Component control slides by itself which is not recommended
@@ -25966,17 +26064,20 @@
 
         if (!loadingCurrent) {
           return;
-        } // 初始不显示标签
-        // @en Initially no labels are displayed
+        }
 
+        var bounceScrollContainer = (getBounceContainer === null || getBounceContainer === void 0 ? void 0 : getBounceContainer()) || scrollContainer; // 初始不显示标签
+        // @en Initially no labels are displayed
 
         loadingCurrent.style.display = 'none';
         var startX = 0;
-        var endX = 0; // 触摸页面确定X起始坐标
+        var endX = 0;
+        var bounceDistance = 0; // 触摸页面确定X起始坐标
         // @en Determine the X starting coordinate on touchstart
 
         var touchstart = function touchstart(e) {
-          startX = e.touches[0].pageX;
+          var evt = e.touches[0];
+          startX = evt.clientX || 0;
         }; // 页面滑动确定X终止坐标，更新手指的X坐标，改变loading中的文字和大小
         // @en Determine the X end coordinate, update the X coordinate of the finger, change the text and size in the loading on touchmove
 
@@ -25988,12 +26089,30 @@
             scrollContainer.scrollLeft = 1;
           }
 
-          endX = e.touches[0].pageX;
+          endX = e.touches[0].clientX || 0;
           var diff = endX - startX;
           offsetRef.current = diff;
-          var labelDiff = fingerDisToLabelDis(Math.abs(diff), props.damping); // 向左滑动到尽头 '更多'标签加载 根据scrollLeft判断 滚动容器到达边缘触发 非滚动容器不判断
+          var labelDiff = fingerDisToLabelDis(Math.abs(diff), damping); // 滑动到最左侧，处理回弹效果
+          // @en Swipe to the far left to handle the rebound effect
+
+          if (diff > 0 && scrollContainer.scrollLeft <= 1 && bounceWhenBumpBoundary) {
+            e.stopPropagation();
+            e.cancelBubble && e.preventDefault();
+            bouncingRef.current = true;
+
+            var processor = bounceDistanceProcessor || function (dis) {
+              return Math.min(dis, bounceScrollContainer.offsetWidth) / bounceDampRate;
+            };
+
+            bounceDistance = processor(diff);
+            setStyleWithVendor(bounceScrollContainer, {
+              transition: 'none',
+              transform: "translateX(" + bounceDistance + "px) translateZ(0)"
+            });
+          } // 向左滑动到尽头 '更多'标签加载 根据scrollLeft判断 滚动容器到达边缘触发 非滚动容器不判断
           // @en Swipe left to the end and the 'more' label is loaded. Judging by scrollLeft, the scroll container reaches the edge and the non-scroll container does not judge
 
+
           if (diff < 0 && (scrollContainer.scrollLeft + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && !ifToRightRef.current) {
             showLoadMoreRef.current = true;
             loadingCurrent.style.display = 'flex';
@@ -26019,12 +26138,14 @@
               loadingLabelCurrent.innerHTML = labelDiff >= minConfirmOffset ? activeText || locale.SwipeLoad.activeText : normalText || locale.SwipeLoad.normalText;
             }
 
-            loadingCurrent.style.transition = 'all 0.02s';
-            loadingCurrent.style.webkitTransform = "translateX(-" + labelRightMargin + "px)";
-            loadingCurrent.style.transform = "translateX(-" + labelRightMargin + "px)";
-            scrollContainer.style.transition = 'all 0.03s';
-            scrollContainer.style.webkitTransform = "translateX(-" + listRightMargin + "px)";
-            scrollContainer.style.transform = "translateX(-" + listRightMargin + "px)";
+            setStyleWithVendor(loadingCurrent, {
+              transition: 'none',
+              transform: "translateX(-" + labelRightMargin + "px) translateZ(0)"
+            });
+            setStyleWithVendor(scrollContainer, {
+              transition: 'none',
+              transform: "translateX(-" + listRightMargin + "px) translateZ(0)"
+            });
           }
 
           if (diff > 0 && scrollContainer.scrollLeft + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
@@ -26049,13 +26170,28 @@
           var labelDiff = fingerDisToLabelDis(Math.abs(diff));
 
           var resumeAnimation = function resumeAnimation() {
-            scrollContainer.style.transition = "all " + labelAnimationDuration + "ms " + labelAnimationFunction;
-            scrollContainer.style.webkitTransform = 'translateX(0px)';
-            scrollContainer.style.transform = 'translateX(0px)';
-            loadingCurrent.style.transition = "all " + labelAnimationDuration + "ms " + labelAnimationFunction;
-            loadingCurrent.style.webkitTransform = 'translateX(0px)';
-            loadingCurrent.style.transform = 'translateX(0px)';
-            showLoadMoreRef.current = false;
+            if (showLoadMoreRef.current) {
+              showLoadMoreRef.current = false;
+              var scrollTransitionCssStyle = "all " + labelAnimationDuration + "ms " + labelAnimationFunction;
+              var scrollTransformCssStyle = 'translateX(0px) translateZ(0)';
+              setStyleWithVendor(scrollContainer, {
+                transition: scrollTransitionCssStyle,
+                transform: scrollTransformCssStyle
+              });
+              setStyleWithVendor(loadingCurrent, {
+                transition: scrollTransitionCssStyle,
+                transform: scrollTransformCssStyle
+              });
+            }
+
+            if (bouncingRef.current) {
+              bouncingRef.current = false;
+              setStyleWithVendor(bounceScrollContainer, {
+                transition: "all " + bounceAnimateDuration + "ms",
+                transform: 'translateX(0px) translateZ(0)'
+              });
+            }
+
             ifToRightRef.current = false;
             setTimeout(function () {
               loadingCurrent.style.display = 'none';
@@ -26085,7 +26221,7 @@
           scrollContainer.removeEventListener('touchmove', touchmove);
           scrollContainer.removeEventListener('touchend', touchend);
         };
-      }, [disabled]);
+      }, [disabled, getScrollContainer, getBounceContainer, bounceWhenBumpBoundary, bounceDampRate, bounceAnimateDuration]);
       React.useImperativeHandle(ref, function () {
         return {
           dom: domRef.current
@@ -26099,14 +26235,14 @@
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-list-area"),
           ref: containerRef
-        }, children), props.renderLabel ? /*#__PURE__*/React__default["default"].createElement("div", {
+        }, children), renderLabel ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-custom-loading-area"),
           ref: loadingRef,
           style: {
             position: 'absolute',
             right: initPos + "px"
           }
-        }, props.renderLabel.length ? props.renderLabel(labelOffsetState) : props.renderLabel()) : /*#__PURE__*/React__default["default"].createElement("div", {
+        }, renderLabel.length ? renderLabel(labelOffsetState) : renderLabel()) : /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-loading-area"),
           ref: loadingRef,
           style: {
@@ -27032,6 +27168,7 @@
           translateZ = props.translateZ,
           fullScreen = props.fullScreen,
           autoHeight = props.autoHeight,
+          swipeEnergySaving = props.swipeEnergySaving,
           changeIndex = props.changeIndex,
           onScroll = props.onScroll;
       var domRef = React.useRef(null);
@@ -27043,12 +27180,16 @@
           shownIndexes = _c[0],
           setShownIndexes = _c[1];
 
+      var _d = React.useState(activeIndex),
+          shownActiveIndex = _d[0],
+          setShownActiveIndex = _d[1];
+
       var prefix = prefixCls + "-tab-pane";
       var handleTouchEnd = swipeable ? handlePaneTouchEnd : void 0;
 
-      var _d = React.useState('auto'),
-          currentPaneHeight = _d[0],
-          setCurrentPaneHeight = _d[1];
+      var _e = React.useState('auto'),
+          currentPaneHeight = _e[0],
+          setCurrentPaneHeight = _e[1];
 
       React.useImperativeHandle(ref, function () {
         return {
@@ -27134,6 +27275,8 @@
       }
 
       function calcShownIndexes() {
+        setShownActiveIndex(activeIndex);
+
         if (typeof lazyloadCount === 'number') {
           setShownIndexes([activeIndex - lazyloadCount, activeIndex + lazyloadCount]);
           return;
@@ -27234,11 +27377,35 @@
         var heightStyle = currentPaneHeight && currentPaneHeight !== 'auto' ? {
           height: currentPaneHeight
         } : {};
-        return getStyleWithVendor(__assign$2(__assign$2(__assign$2(__assign$2({}, sizeStyle), {
+        return getStyleWithVendor(__assign$2(__assign$2(__assign$2(__assign$2({}, swipeEnergySaving ? {} : sizeStyle), {
           transitionDuration: getTransition() + "ms"
         }), heightStyle), commonStyle));
       }
 
+      function getEnergySavingPaneStyle(index) {
+        if (mode === 'scroll' || !swipeEnergySaving) {
+          return undefined;
+        }
+
+        if (index !== shownActiveIndex) {
+          return {
+            position: 'absolute',
+            left: '-100%',
+            top: '-100%'
+          };
+        }
+
+        var translateStr = translateZ ? ' translateZ(0)' : '';
+        var sizeStyle = tabDirection === 'vertical' ? {
+          transform: "translateX(" + (distance - wrapWidth * (activeIndex - index)) + "px)" + translateStr
+        } : {
+          transform: "translateY(" + (distance - wrapHeight * (activeIndex - index)) + "px)" + translateStr
+        };
+        return getStyleWithVendor(__assign$2(__assign$2({}, sizeStyle), {
+          transitionDuration: getTransition() + "ms"
+        }));
+      }
+
       function renderContent(pane, index) {
         var contentProps = {
           key: index,
@@ -27248,32 +27415,39 @@
           ref: function ref(r) {
             return panesRef.current[index] = r;
           }
-        }; // 是滚动模式或在加载范围内，直接渲染
+        };
+        var energySavingStyle = getEnergySavingPaneStyle(index); // 是滚动模式或在加载范围内，直接渲染
         // @en Render directly when in scroll mode or in loading scope
 
         if (mode === 'scroll' || index >= shownIndexes[0] && index <= shownIndexes[1]) {
-          return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps), pane);
-        } // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
+          return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
+            style: energySavingStyle
+          }), pane);
+        }
+
+        var energySavingHideStyle = __assign$2(__assign$2({}, energySavingStyle), hideContentStyle || {}); // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
         // @en Not in the loading range, depending on renderHideContent and hideContentStyle
 
 
         if (renderHideContent) {
           return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
-            style: hideContentStyle || {}
+            style: energySavingHideStyle
           }), renderHideContent(index, pane));
         }
 
         if (hideContentStyle === null) {
-          return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps));
+          return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
+            style: energySavingStyle
+          }));
         }
 
         return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
-          style: hideContentStyle
+          style: energySavingHideStyle
         }), pane);
       }
 
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: cls(prefix + "-container", tabDirection, "mode-" + mode, tabPaneClass, {
+        className: cls(prefix + "-container", tabDirection, swipeEnergySaving ? "mode-" + mode + "-energy-saving" : "mode-" + mode, tabPaneClass, {
           'full-screen': fullScreen
         }, (_a = {}, _a["mode-scroll-" + (scrollVertical ? 'vertical' : 'horizontal')] = mode === 'scroll', _a)),
         style: getPaneStyle(),
@@ -27402,44 +27576,46 @@
           fullScreen = props.fullScreen,
           autoHeight = props.autoHeight,
           _6 = props.tabBarStopPropagation,
-          tabBarStopPropagation = _6 === void 0 ? true : _6;
+          tabBarStopPropagation = _6 === void 0 ? true : _6,
+          _7 = props.swipeEnergySaving,
+          swipeEnergySaving = _7 === void 0 ? false : _7;
       var domRef = React.useRef(null);
       var cellRef = React.useRef(null);
       var paneRef = React.useRef(null);
 
-      var _7 = React.useState(defaultActiveTab),
-          innerIndex = _7[0],
-          setInnerIndex = _7[1];
-
-      var _8 = React.useState(0),
-          jumpingDis = _8[0],
-          setJumpingDis = _8[1];
+      var _8 = React.useState(defaultActiveTab),
+          innerIndex = _8[0],
+          setInnerIndex = _8[1];
 
       var _9 = React.useState(0),
-          wrapWidth = _9[0],
-          setWrapWidth = _9[1];
+          jumpingDis = _9[0],
+          setJumpingDis = _9[1];
 
       var _10 = React.useState(0),
-          wrapHeight = _10[0],
-          setWrapHeight = _10[1];
+          wrapWidth = _10[0],
+          setWrapWidth = _10[1];
 
-      var _11 = React.useState(false),
-          cellTrans = _11[0],
-          setCellTrans = _11[1];
+      var _11 = React.useState(0),
+          wrapHeight = _11[0],
+          setWrapHeight = _11[1];
 
       var _12 = React.useState(false),
-          paneTrans = _12[0],
-          setPaneTrans = _12[1];
+          cellTrans = _12[0],
+          setCellTrans = _12[1];
+
+      var _13 = React.useState(false),
+          paneTrans = _13[0],
+          setPaneTrans = _13[1];
 
-      var _13 = useRefState(activeTab === void 0 ? innerIndex : activeTab),
-          activeIndex = _13[0],
-          activeIndexRef = _13[1],
-          setActiveIndex = _13[2];
+      var _14 = useRefState(activeTab === void 0 ? innerIndex : activeTab),
+          activeIndex = _14[0],
+          activeIndexRef = _14[1],
+          setActiveIndex = _14[2];
 
-      var _14 = useRefState(0),
-          distance = _14[0],
-          distanceRef = _14[1],
-          setDistance = _14[2];
+      var _15 = useRefState(0),
+          distance = _15[0],
+          distanceRef = _15[1],
+          setDistance = _15[2];
 
       var posAdjustingRef = React.useRef(false);
       var touchStartedRef = React.useRef(false);
@@ -27501,6 +27677,7 @@
         // 利用受控手动更改index时，给cell line加上动画
         // @en Animate the cell line when changeing the index
         setCellTrans(true);
+        changeFromRef.current = 'manual';
       }, [activeTab]);
       useUpdateEffect(function () {
         onDistanceChange && onDistanceChange(distance, wrapWidth, activeIndex);
@@ -27786,7 +27963,8 @@
           tabPaneClass: tabPaneClass,
           tabPaneExtra: tabPaneExtra,
           autoHeight: autoHeight,
-          onScroll: onScroll
+          onScroll: onScroll,
+          swipeEnergySaving: swipeEnergySaving
         }, commonProps)));
       });
     });