@arco-design/mobile-react 2.27.1 → 2.27.3

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.27.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.27.2...@arco-design/mobile-react@2.27.3) (2023-05-16)
+
+
+### Bug Fixes
+
+* `Tabs` support swipe energy-saving mode ([50a440b](https://github.com/arco-design/arco-design-mobile/commit/50a440bc808c418a01160d8dcbaa2a870a5a4b97))
+
+
+
+
+
+## [2.27.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.27.1...@arco-design/mobile-react@2.27.2) (2023-05-10)
+
+
+### Bug Fixes
+
+* `LoadMore` status reset time for controlled mode ([#121](https://github.com/arco-design/arco-design-mobile/issues/121)) ([f141e7f](https://github.com/arco-design/arco-design-mobile/commit/f141e7f8e91944f5d68bb5fbf59238d5d48b8eda))
+* `NavBar` fix warning in nextjs ssr ([#118](https://github.com/arco-design/arco-design-mobile/issues/118)) ([57c2838](https://github.com/arco-design/arco-design-mobile/commit/57c283852f26e06fb4d38dc8753cff7a34232a98))
+* `ShowMonitor` support observer singleton ([#113](https://github.com/arco-design/arco-design-mobile/issues/113)) ([7099b30](https://github.com/arco-design/arco-design-mobile/commit/7099b307935357e496b902f6148ea0854da2912a))
+* `SwipeLoad` support bounce animate ([#29](https://github.com/arco-design/arco-design-mobile/issues/29)) ([cad1a6b](https://github.com/arco-design/arco-design-mobile/commit/cad1a6ba19e6d45a33233281fba863434f553ce2))
+* `Tabs` enable auto scroll when activeTab changed in scroll mode ([#116](https://github.com/arco-design/arco-design-mobile/issues/116)) ([07374f1](https://github.com/arco-design/arco-design-mobile/commit/07374f105f99418d447fc494c90d99d876601f9b))
+
+
+
+
+
 ## [2.27.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.27.0...@arco-design/mobile-react@2.27.1) (2023-04-26)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.27.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.27.2/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.27.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.27.2/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/_helpers/index.d.ts

@@ -7,6 +7,7 @@ export * from './hooks';
 export * from './type';
 export * from './react-dom';
 export declare function getStyleWithVendor(style: CSSProperties): CSSProperties;
+export declare function setStyleWithVendor(dom: HTMLElement, style: CSSProperties): void;
 /**
  * 计算默认值，仅未定义时使用默认值
  * @desc {en} Calculate the default value, use default value only if undefined

package/cjs/_helpers/index.js

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 var _exportNames = {
   getStyleWithVendor: true,
+  setStyleWithVendor: true,
   getDefaultValue: true
 };
 exports.getDefaultValue = void 0;
 exports.getStyleWithVendor = getStyleWithVendor;
+exports.setStyleWithVendor = setStyleWithVendor;
 
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -55,6 +57,14 @@ function getStyleWithVendor(style) {
   }, {});
   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

package/cjs/index-bar/type.d.ts

@@ -9,7 +9,7 @@ export interface IndexBarBaseData {
      */
     content: ReactNode;
 }
-interface IndexBarGroupItem<Data extends IndexBarBaseData> {
+interface IndexBarGroupItem<Data extends IndexBarBaseData = IndexBarBaseData> {
     /**
      * IndexBarGroup对应的索引
      * @en Index corresponding to IndexBarGroup
@@ -39,7 +39,7 @@ export interface IndexBarSideBarProps {
     renderSideBar?: (Content: ReactNode) => ReactElement;
     renderTip?: (index: IndexBarIndexType) => ReactNode;
 }
-export interface IndexBarGroupProps<Data extends IndexBarBaseData> extends IndexBarGroupItem<Data> {
+export interface IndexBarGroupProps<Data extends IndexBarBaseData = IndexBarBaseData> extends IndexBarGroupItem<Data> {
     /**
      * 自定义类名
      * @en Custom classname
@@ -78,7 +78,7 @@ export interface IndexBarGroupProps<Data extends IndexBarBaseData> extends Index
 }
 export interface IndexBarGroupRef extends BaseRef {
 }
-export interface IndexBarProps<Data extends IndexBarBaseData> {
+export interface IndexBarProps<Data extends IndexBarBaseData = IndexBarBaseData> {
     /**
      * 自定义类名
      * @en Custom classname

package/cjs/load-more/index.js

@@ -75,11 +75,14 @@ var LoadMore = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     changeStatus('loading', scene);
     getData == null ? void 0 : getData(function (st) {
-      lastScrollEndRef.current = false;
       changeStatus(st, 'manual');
     });
   }, [blockWhenLoading, changeStatus, getData]);
   (0, _react.useEffect)(function () {
+    if (!blockWhenLoading || nowStatus !== 'loading') {
+      lastScrollEndRef.current = false;
+    }
+
     statusRef.current = nowStatus;
   }, [nowStatus]);
   (0, _helpers.useUpdateEffect)(function () {

package/cjs/nav-bar/index.js

@@ -146,7 +146,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ref: navBarRef,
       className: (0, _mobileUtils.cls)(wrapClass, prefixCls + "-nav-bar", (_cls = {}, _cls[prefixCls + "-nav-bar-fixed"] = fixed, _cls[prefixCls + "-nav-bar-float"] = !placeholder, _cls[prefixCls + "-nav-bar-hide"] = scrollToggleHide, _cls)),
       style: (0, _extends2.default)({
-        paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : ''
+        paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : '0px'
       }, style || {}, relBackground ? {
         background: relBackground
       } : {}),
@@ -155,7 +155,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(className, system, prefixCls + "-nav-bar-wrapper", (_cls2 = {}, _cls2[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _cls2[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _cls2)),
       style: (0, _extends2.default)({
-        paddingTop: statusBarHeight ? statusBarHeight + "px" : ''
+        paddingTop: statusBarHeight ? statusBarHeight + "px" : '0px'
       }, customStyle)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-nav-bar-inner all-border-box"

package/cjs/show-monitor/index.js

@@ -31,6 +31,18 @@ var wrapperNodeList = [];
 
 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 是否进入视口或离开视口。
@@ -78,12 +90,6 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
    */
 
   var domRefParent = (0, _react.useRef)(null);
-  /**
-   * 当前元素是否在可视区域内
-   * @en Whether the current element is in the visible area
-   */
-
-  var isVisible = (0, _react.useRef)(false);
   /**
    * 保存当前节点信息，类似于 class component 中 this
    * @en Save current node information, similar to this in class component
@@ -130,10 +136,8 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
        * @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;
 
@@ -197,7 +201,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
      */
 
 
-    curVisible !== preVisible.current && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
+    curVisible !== preVisible && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
     var key = wrapperKey.current;
     /**
      * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉
@@ -213,8 +217,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
      */
 
 
-    curVisible && !preVisible.current && compOnce && onOnceEmittedListeners[key].push(component);
-    preVisible.current = curVisible;
+    curVisible && !preVisible && compOnce && onOnceEmittedListeners[key].push(component);
   }
 
   var checkVisibleHandler = (0, _react.useCallback)(function () {
@@ -234,22 +237,98 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   function handleObserverStatusChange(entries) {
-    var _io$current;
+    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 !== 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
+   */
 
-    isIntersecting !== isVisible.current && handleCheckChildrenExist() && onVisibleChange(isIntersecting, domRef.current);
-    /**
-     * 当前元素不可见 -> 可见，且 once, 触发回调函数
-     * @en The current element is invisible -> visible, and once, triggers the callback
-     */
 
-    isIntersecting && !isVisible.current && once && domRef.current && ((_io$current = io.current) == null ? void 0 : _io$current.unobserve(domRef.current));
-    isVisible.current = isIntersecting;
+  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;
+    });
+
+    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变化时，重新监听元素
@@ -259,14 +338,11 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   (0, _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并删除
@@ -330,12 +406,12 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           rootMargin = offset + "px";
         }
 
-        io.current = new IntersectionObserver(handleObserverStatusChange, {
+        getIOSingleton({
           root: root,
           rootMargin: rootMargin,
           threshold: threshold
         });
-        !disabled && io.current.observe(domRef.current);
+        !disabled && ioObserve();
       }
     } else {
       // 节流后回调函数
@@ -379,7 +455,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
       listener.current = {
         node: domRef.current,
-        isVisible: isVisible,
+        isVisible: false,
         overflow: overflow,
         once: once,
         offset: offset,
@@ -396,9 +472,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useEffect)(function () {
     return function () {
       if (isSupportNativeApi) {
-        var _io$current2;
-
-        domRef.current && ((_io$current2 = io.current) == null ? void 0 : _io$current2.unobserve(domRef.current));
+        ioUnobserve();
       } else {
         if (overflow) {
           var parent = domRefParent.current;

package/cjs/swipe-load/demo/style/css/mobile.css

@@ -2,6 +2,9 @@
   width: 100%;
   background:  #e5e6eb ;
 }
+#demo-swipe-load .list-container::-webkit-scrollbar {
+  display: none;
+}
 #demo-swipe-load .course-list {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

package/cjs/swipe-load/demo/style/mobile.less

@@ -4,36 +4,47 @@
     .list-container {
         width: 100%;
         .use-var(background, line-color);
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
     }
+
     .course-list {
         display: inline-flex;
         align-items: flex-start;
         padding: 12px 0;
     }
+
     .list-item,
     .list-item-color {
         height: 72px;
         margin-right: 10px;
         .use-var(background, background-color);
     }
+
     .list-item-color {
         .use-var(background, primary-disabled-color);
     }
+
     .mylabel-start,
     .mylabel-end {
         width: 100px;
         height: 96px;
         transition: background 0.2s;
         .use-var(background, background-color);
+
         &.end {
             .use-var(background, line-color);
         }
     }
+
     .mylabel-single {
         width: 100px;
         height: 88px;
         .use-var(background, primary-disabled-color);
     }
+
     .single-element {
         height: 88px;
         .use-var(background, primary-disabled-color);

package/cjs/swipe-load/index.js

@@ -10,6 +10,8 @@ var _mobileUtils = require("@arco-design/mobile-utils");
 
 var _contextProvider = require("../context-provider");
 
+var _helpers = require("../_helpers");
+
 var _hooks = require("../_helpers/hooks");
 
 var _type = require("./type");
@@ -57,7 +59,22 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _props$activeText = props.activeText,
       activeText = _props$activeText === void 0 ? '' : _props$activeText,
       _props$initPos = props.initPos,
-      initPos = _props$initPos === void 0 ? 0 : _props$initPos;
+      initPos = _props$initPos === void 0 ? 0 : _props$initPos,
+      _props$bounceWhenBump = props.bounceWhenBumpBoundary,
+      bounceWhenBumpBoundary = _props$bounceWhenBump === void 0 ? false : _props$bounceWhenBump,
+      _props$bounceDampRate = props.bounceDampRate,
+      bounceDampRate = _props$bounceDampRate === void 0 ? 3 : _props$bounceDampRate,
+      _props$bounceAnimateD = props.bounceAnimateDuration,
+      bounceAnimateDuration = _props$bounceAnimateD === void 0 ? 300 : _props$bounceAnimateD,
+      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 _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
       _useContext$locale = _useContext.locale,
@@ -76,13 +93,14 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var loadingLabelRef = (0, _react.useRef)(null);
   var showLoadMoreRef = (0, _react.useRef)(false);
   var ifToRightRef = (0, _react.useRef)(false);
+  var bouncingRef = (0, _react.useRef)(false);
   var offsetRef = (0, _react.useRef)(0);
   var domRef = (0, _react.useRef)(null);
   var wrapperEl = domRef.current;
-  (0, _hooks.useAddListener)(wrapperEl, 'touchstart', props.onTouchStart);
-  (0, _hooks.useAddListener)(wrapperEl, 'touchend', props.onTouchEnd);
-  (0, _hooks.useAddListener)(wrapperEl, 'touchcancel', props.onTouchCancel);
-  (0, _hooks.useAddListener)(wrapperEl, 'touchmove', props.onTouchMove);
+  (0, _hooks.useAddListener)(wrapperEl, 'touchstart', onTouchStart);
+  (0, _hooks.useAddListener)(wrapperEl, 'touchend', onTouchEnd);
+  (0, _hooks.useAddListener)(wrapperEl, 'touchcancel', onTouchCancel);
+  (0, _hooks.useAddListener)(wrapperEl, 'touchmove', onTouchMove);
   (0, _react.useEffect)(function () {
     if (disabled || !containerRef.current || disableState) {
       return;
@@ -96,13 +114,11 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       // @en If no child element is passed in,  component will be disabled
       setDisableState(true);
     } else if (containerRef.current.childNodes.length === 1) {
+      var _getScrollContainer;
+
       // 传入一个子元素 滑动单个元素
       // @en Pass in a child element swipe the single element
-      if (props.getScrollContainer) {
-        scrollContainer = props.getScrollContainer();
-      } else {
-        scrollContainer = containerRef.current.firstChild;
-      }
+      scrollContainer = (_getScrollContainer = getScrollContainer == null ? void 0 : getScrollContainer()) != null ? _getScrollContainer : containerRef.current.firstChild;
     } else {
       // 传入多个子元素(列表元素为例) 组件控制自行滑动 不推荐
       // @en Pass in multiple sub-elements (list elements as an example) Component control slides by itself which is not recommended
@@ -122,17 +138,20 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     if (!loadingCurrent) {
       return;
-    } // 初始不显示标签
-    // @en Initially no labels are displayed
+    }
 
+    var bounceScrollContainer = (getBounceContainer == null ? 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
 
@@ -144,12 +163,30 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         scrollContainer.scrollLeft = 1;
       }
 
-      endX = e.touches[0].pageX;
+      endX = e.touches[0].clientX || 0;
       var diff = endX - startX;
       offsetRef.current = diff;
-      var labelDiff = (0, _mobileUtils.fingerDisToLabelDis)(Math.abs(diff), props.damping); // 向左滑动到尽头 '更多'标签加载 根据scrollLeft判断 滚动容器到达边缘触发 非滚动容器不判断
+      var labelDiff = (0, _mobileUtils.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);
+        (0, _helpers.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';
@@ -175,12 +212,14 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           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)";
+        (0, _helpers.setStyleWithVendor)(loadingCurrent, {
+          transition: 'none',
+          transform: "translateX(-" + labelRightMargin + "px) translateZ(0)"
+        });
+        (0, _helpers.setStyleWithVendor)(scrollContainer, {
+          transition: 'none',
+          transform: "translateX(-" + listRightMargin + "px) translateZ(0)"
+        });
       }
 
       if (diff > 0 && scrollContainer.scrollLeft + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
@@ -205,13 +244,28 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       var labelDiff = (0, _mobileUtils.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)';
+          (0, _helpers.setStyleWithVendor)(scrollContainer, {
+            transition: scrollTransitionCssStyle,
+            transform: scrollTransformCssStyle
+          });
+          (0, _helpers.setStyleWithVendor)(loadingCurrent, {
+            transition: scrollTransitionCssStyle,
+            transform: scrollTransformCssStyle
+          });
+        }
+
+        if (bouncingRef.current) {
+          bouncingRef.current = false;
+          (0, _helpers.setStyleWithVendor)(bounceScrollContainer, {
+            transition: "all " + bounceAnimateDuration + "ms",
+            transform: 'translateX(0px) translateZ(0)'
+          });
+        }
+
         ifToRightRef.current = false;
         setTimeout(function () {
           loadingCurrent.style.display = 'none';
@@ -241,7 +295,7 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       scrollContainer.removeEventListener('touchmove', touchmove);
       scrollContainer.removeEventListener('touchend', touchend);
     };
-  }, [disabled]);
+  }, [disabled, getScrollContainer, getBounceContainer, bounceWhenBumpBoundary, bounceDampRate, bounceAnimateDuration]);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       dom: domRef.current
@@ -255,14 +309,14 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-list-area"),
       ref: containerRef
-    }, children), props.renderLabel ? /*#__PURE__*/_react.default.createElement("div", {
+    }, children), renderLabel ? /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-custom-loading-area"),
       ref: loadingRef,
       style: {
         position: 'absolute',
         right: initPos + "px"
       }
-    }, props.renderLabel.length ? props.renderLabel(labelOffsetState) : props.renderLabel()) : /*#__PURE__*/_react.default.createElement("div", {
+    }, renderLabel.length ? renderLabel(labelOffsetState) : renderLabel()) : /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-loading-area"),
       ref: loadingRef,
       style: {

package/cjs/swipe-load/style/css/index.css

@@ -9,6 +9,9 @@
   position: relative;
   width: 100%;
 }
+.arco-swipe-load .arco-list-area::-webkit-scrollbar {
+  display: none;
+}
 .arco-swipe-load .arco-loading-area {
   background-color:  #f8f8f8 ;
   margin-top: 0;