@arco-design/mobile-react 2.27.1 → 2.27.2

package/esm/nav-bar/index.js

@@ -130,7 +130,7 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
       ref: navBarRef,
       className: 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: _extends({
-        paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : ''
+        paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : '0px'
       }, style || {}, relBackground ? {
         background: relBackground
       } : {}),
@@ -139,7 +139,7 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: cls(className, system, prefixCls + "-nav-bar-wrapper", (_cls2 = {}, _cls2[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _cls2[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _cls2)),
       style: _extends({
-        paddingTop: statusBarHeight ? statusBarHeight + "px" : ''
+        paddingTop: statusBarHeight ? statusBarHeight + "px" : '0px'
       }, customStyle)
     }, /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-nav-bar-inner all-border-box"

package/esm/show-monitor/index.js

@@ -16,6 +16,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 是否进入视口或离开视口。
@@ -63,12 +75,6 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
    */
 
   var domRefParent = useRef(null);
-  /**
-   * 当前元素是否在可视区域内
-   * @en Whether the current element is in the visible area
-   */
-
-  var isVisible = useRef(false);
   /**
    * 保存当前节点信息，类似于 class component 中 this
    * @en Save current node information, similar to this in class component
@@ -115,10 +121,8 @@ var ShowMonitor = /*#__PURE__*/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;
 
@@ -182,7 +186,7 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
      */
 
 
-    curVisible !== preVisible.current && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
+    curVisible !== preVisible && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
     var key = wrapperKey.current;
     /**
      * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉
@@ -198,8 +202,7 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
      */
 
 
-    curVisible && !preVisible.current && compOnce && onOnceEmittedListeners[key].push(component);
-    preVisible.current = curVisible;
+    curVisible && !preVisible && compOnce && onOnceEmittedListeners[key].push(component);
   }
 
   var checkVisibleHandler = useCallback(function () {
@@ -219,22 +222,98 @@ var ShowMonitor = /*#__PURE__*/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变化时，重新监听元素
@@ -244,14 +323,11 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
 
   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并删除
@@ -315,12 +391,12 @@ var ShowMonitor = /*#__PURE__*/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 {
       // 节流后回调函数
@@ -364,7 +440,7 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
 
       listener.current = {
         node: domRef.current,
-        isVisible: isVisible,
+        isVisible: false,
         overflow: overflow,
         once: once,
         offset: offset,
@@ -381,9 +457,7 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
   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/esm/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/esm/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/esm/swipe-load/index.js

@@ -1,6 +1,7 @@
 import React, { useRef, forwardRef, useImperativeHandle, useEffect, useState, useContext } from 'react';
 import { cls, fingerDisToLabelDis, defaultLocale } from '@arco-design/mobile-utils';
 import { ContextLayout, GlobalContext } from '../context-provider';
+import { setStyleWithVendor } from '../_helpers';
 import { useAddListener } from '../_helpers/hooks';
 export * from './type';
 /**
@@ -36,7 +37,22 @@ var SwipeLoad = /*#__PURE__*/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 = useContext(GlobalContext),
       _useContext$locale = _useContext.locale,
@@ -55,13 +71,14 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
   var loadingLabelRef = useRef(null);
   var showLoadMoreRef = useRef(false);
   var ifToRightRef = useRef(false);
+  var bouncingRef = useRef(false);
   var offsetRef = useRef(0);
   var domRef = 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);
   useEffect(function () {
     if (disabled || !containerRef.current || disableState) {
       return;
@@ -75,13 +92,11 @@ var SwipeLoad = /*#__PURE__*/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
@@ -101,17 +116,20 @@ var SwipeLoad = /*#__PURE__*/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
 
@@ -123,12 +141,30 @@ var SwipeLoad = /*#__PURE__*/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 = 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';
@@ -154,12 +190,14 @@ var SwipeLoad = /*#__PURE__*/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)";
+        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) {
@@ -184,13 +222,28 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
       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';
@@ -220,7 +273,7 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
       scrollContainer.removeEventListener('touchmove', touchmove);
       scrollContainer.removeEventListener('touchend', touchend);
     };
-  }, [disabled]);
+  }, [disabled, getScrollContainer, getBounceContainer, bounceWhenBumpBoundary, bounceDampRate, bounceAnimateDuration]);
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current
@@ -234,14 +287,14 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-list-area"),
       ref: containerRef
-    }, children), props.renderLabel ? /*#__PURE__*/React.createElement("div", {
+    }, children), renderLabel ? /*#__PURE__*/React.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.createElement("div", {
+    }, renderLabel.length ? renderLabel(labelOffsetState) : renderLabel()) : /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-loading-area"),
       ref: loadingRef,
       style: {

package/esm/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;

package/esm/swipe-load/style/index.less

@@ -4,14 +4,21 @@
     position: relative;
     display: inline-flex;
     width: 100%;
+
     .@{prefix}-list-area {
         position: relative;
         width: 100%;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
     }
+
     .@{prefix}-loading-area {
         .use-var(background-color, swipe-load-label-background);
         margin-top: 0;
         .use-var(border-radius, swipe-load-label-border-radius);
+
         .@{prefix}-loading-label {
             .use-var(margin-left, swipe-load-label-text-margin-left);
             .use-var(width, swipe-load-label-text-width);

package/esm/swipe-load/type.d.ts

@@ -77,6 +77,35 @@ export interface SwipeLoadProps {
      * @default_en "Release to view"
      */
     activeText?: string;
+    /**
+     * 触碰左侧边界时是否需要回弹效果
+     * @en Whether a bounce effect is required when touching the left boundary
+     * @default false
+     */
+    bounceWhenBumpBoundary?: boolean;
+    /**
+     * 当开启回弹效果时的阻尼系数
+     * @en Damping coefficient when the rebound effect is turned on
+     * @default 3
+     */
+    bounceDampRate?: number;
+    /**
+     * 当开启回弹效果时的动画毫秒时间
+     * @en Animation in milliseconds when the bounce effect is turned on
+     * @default 300
+     */
+    bounceAnimateDuration?: number;
+    /**
+     * 回弹效果开启时需要回弹的容器，默认为 getScrollContainer 返回的容器或容器的一个子元素
+     * @en The container that needs to be rebounded when the rebound effect is enabled, the default is the container returned by getScrollContainer or a child element of the container
+     */
+    getBounceContainer?: () => HTMLElement | null;
+    /**
+     * 当开启回弹效果时自定义手指滑动跟手的距离计算方式，dis表示touchmove的距离
+     * @en When the rebound effect is turned on, customize the calculation method of the distance between the finger sliding and the hand, and dis indicates the distance of touchmove
+     * @default (dis) => Math.min(dis, bounceScrollContainer.offsetWidth) / bounceDampRate
+     */
+    bounceDistanceProcessor?: (dis: number) => number;
     /**
      * 抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突
      * @en Throw the outer touchstart event, which is easy to customize. It is often used to prevent gesture conflicts such as swiping to exit, switching tabs, etc.

package/esm/tabs/index.js

@@ -220,6 +220,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     // 利用受控手动更改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);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.27.1",
+    "version": "2.27.2",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.15.1",
+        "@arco-design/mobile-utils": "2.15.2",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -35,5 +35,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "9c06acb2cc9341ee12843d1720e9b796cbbc2ac5"
+    "gitHead": "e270c691a36dba4048f27ee6d10616291e11e062"
 }

package/umd/_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/umd/_helpers/index.js

@@ -18,10 +18,12 @@
   _exports.__esModule = true;
   var _exportNames = {
     getStyleWithVendor: true,
+    setStyleWithVendor: true,
     getDefaultValue: true
   };
   _exports.getDefaultValue = void 0;
   _exports.getStyleWithVendor = getStyleWithVendor;
+  _exports.setStyleWithVendor = setStyleWithVendor;
   _extends3 = _interopRequireDefault(_extends3);
   Object.keys(_hooks).forEach(function (key) {
     if (key === "default" || key === "__esModule") return;
@@ -58,6 +60,14 @@
     }, {});
     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