@arco-design/mobile-react 2.27.0 → 2.27.2

package/umd/index-bar/index.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@arco-design/mobile-utils", "@arco-design/mobile-utils/utils", "lodash.throttle", "react", "../context-provider", "./context", "./group", "./side-bar", "./utils"], factory);
+    define(["exports", "@arco-design/mobile-utils", "lodash.throttle", "react", "../context-provider", "./context", "./group", "./side-bar", "./utils"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@arco-design/mobile-utils"), require("@arco-design/mobile-utils/utils"), require("lodash.throttle"), require("react"), require("../context-provider"), require("./context"), require("./group"), require("./side-bar"), require("./utils"));
+    factory(exports, require("@arco-design/mobile-utils"), require("lodash.throttle"), require("react"), require("../context-provider"), require("./context"), require("./group"), require("./side-bar"), require("./utils"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.mobileUtils, global.utils, global.lodash, global.react, global.contextProvider, global.context, global.group, global.sideBar, global.utils);
+    factory(mod.exports, global.mobileUtils, global.lodash, global.react, global.contextProvider, global.context, global.group, global.sideBar, global.utils);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _mobileUtils, _utils, _lodash, _react, _contextProvider, _context, _group, _sideBar, _utils2) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _mobileUtils, _lodash, _react, _contextProvider, _context, _group, _sideBar, _utils) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -53,7 +53,7 @@
 
     var containerRef = (0, _react.useRef)(null); // 过滤掉jsx写法中，奇怪的child
 
-    var formatChildren = (0, _utils2.filterValidIndexBarChild)(children); // 所有的索引内容，优先从props.groups中获取，再从formatChildren中获取
+    var formatChildren = (0, _utils.filterValidIndexBarChild)(children); // 所有的索引内容，优先从props.groups中获取，再从formatChildren中获取
 
     var indexes = (0, _react.useMemo)(function () {
       if (groups.length) {
@@ -92,7 +92,7 @@
 
     var handleChangeActiveIndex = function handleChangeActiveIndex(index, type) {
       setActiveIndex(function (oldActiveIndex) {
-        var newActiveIndex = (0, _utils2.getFormatIndex)(index, oldActiveIndex); // 和上一次激活的acitveIndex不同，再触发onChange事件
+        var newActiveIndex = (0, _utils.getFormatIndex)(index, oldActiveIndex); // 和上一次激活的acitveIndex不同，再触发onChange事件
 
         if (newActiveIndex !== oldActiveIndex) {
           onChange == null ? void 0 : onChange(newActiveIndex, type);
@@ -112,12 +112,12 @@
       var formatIndex = index != null ? index : indexes == null ? void 0 : indexes[0];
       var containerDom = containerRef.current;
 
-      if (!(0, _utils2.isValidIndex)(index) || !containerDom) {
+      if (!(0, _utils.isValidIndex)(index) || !containerDom) {
         return;
       } // 寻找Index对应的groupDom
 
 
-      var groupDom = (0, _utils2.getGroupDomFromIndex)(containerDom, formatIndex);
+      var groupDom = (0, _utils.getGroupDomFromIndex)(containerDom, formatIndex);
 
       if (groupDom) {
         handleChangeActiveIndex(formatIndex, type);
@@ -133,7 +133,7 @@
         }
 
         if (duration > 0) {
-          (0, _utils.scrollWithAnimation)(containerDom.scrollTop, targetScrollTop, function (top) {
+          (0, _mobileUtils.scrollWithAnimation)(containerDom.scrollTop, targetScrollTop, function (top) {
             return containerDom.scrollTop = top;
           }, duration, scrollBezier);
         } else {
@@ -146,7 +146,7 @@
       return {
         dom: domRef.current,
         scrollToIndex: function scrollToIndex(index, rightNow) {
-          if ((0, _utils2.isValidIndex)(index)) {
+          if ((0, _utils.isValidIndex)(index)) {
             handleScrollIntoIndex({
               index: index,
               rightNow: rightNow,

package/umd/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/umd/load-more/index.js

@@ -80,11 +80,14 @@
 
       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/umd/nav-bar/index.js

@@ -150,7 +150,7 @@
         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
         } : {}),
@@ -159,7 +159,7 @@
       }, /*#__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/umd/show-monitor/index.js

@@ -38,6 +38,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 是否进入视口或离开视口。
@@ -85,12 +97,6 @@
      */
 
     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
@@ -137,10 +143,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;
 
@@ -204,7 +208,7 @@
        */
 
 
-      curVisible !== preVisible.current && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
+      curVisible !== preVisible && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
       var key = wrapperKey.current;
       /**
        * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉
@@ -220,8 +224,7 @@
        */
 
 
-      curVisible && !preVisible.current && compOnce && onOnceEmittedListeners[key].push(component);
-      preVisible.current = curVisible;
+      curVisible && !preVisible && compOnce && onOnceEmittedListeners[key].push(component);
     }
 
     var checkVisibleHandler = (0, _react.useCallback)(function () {
@@ -241,22 +244,98 @@
     }
 
     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变化时，重新监听元素
@@ -266,14 +345,11 @@
 
     (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并删除
@@ -337,12 +413,12 @@
             rootMargin = offset + "px";
           }
 
-          io.current = new IntersectionObserver(handleObserverStatusChange, {
+          getIOSingleton({
             root: root,
             rootMargin: rootMargin,
             threshold: threshold
           });
-          !disabled && io.current.observe(domRef.current);
+          !disabled && ioObserve();
         }
       } else {
         // 节流后回调函数
@@ -386,7 +462,7 @@
 
         listener.current = {
           node: domRef.current,
-          isVisible: isVisible,
+          isVisible: false,
           overflow: overflow,
           once: once,
           offset: offset,
@@ -403,9 +479,7 @@
     (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/umd/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/umd/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/umd/swipe-load/index.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "@arco-design/mobile-utils", "../context-provider", "../_helpers/hooks", "./type"], factory);
+    define(["exports", "react", "@arco-design/mobile-utils", "../context-provider", "../_helpers", "../_helpers/hooks", "./type"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../_helpers/hooks"), require("./type"));
+    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../_helpers"), require("../_helpers/hooks"), require("./type"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.mobileUtils, global.contextProvider, global.hooks, global.type);
+    factory(mod.exports, global.react, global.mobileUtils, global.contextProvider, global._helpers, global.hooks, global.type);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _contextProvider, _hooks, _type) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _contextProvider, _helpers, _hooks, _type) {
   "use strict";
 
   _exports.__esModule = true;
@@ -60,7 +60,22 @@
         _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,
@@ -79,13 +94,14 @@
     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;
@@ -99,13 +115,11 @@
         // @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
@@ -125,17 +139,20 @@
 
       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
 
@@ -147,12 +164,30 @@
           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';
@@ -178,12 +213,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)";
+          (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) {
@@ -208,13 +245,28 @@
         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';
@@ -244,7 +296,7 @@
         scrollContainer.removeEventListener('touchmove', touchmove);
         scrollContainer.removeEventListener('touchend', touchend);
       };
-    }, [disabled]);
+    }, [disabled, getScrollContainer, getBounceContainer, bounceWhenBumpBoundary, bounceDampRate, bounceAnimateDuration]);
     (0, _react.useImperativeHandle)(ref, function () {
       return {
         dom: domRef.current
@@ -258,14 +310,14 @@
       }, /*#__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/umd/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;