@nutui/nutui-react-taro 2.3.3 → 2.3.4

package/dist/nutui.react.es.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.3.3 Fri Dec 22 2023 17:47:39 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.3.4 Fri Dec 29 2023 14:38:58 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -9235,9 +9235,7 @@ const DatePicker = (props) => {
     return val || [];
   };
   useEffect(() => {
-    if (selectedDate) {
-      setPickerOptions(columns());
-    }
+    setPickerOptions(columns());
   }, [selectedDate, startDate, endDate]);
   return /* @__PURE__ */ React__default.createElement(
     View,
@@ -14929,12 +14927,13 @@ const InfiniteLoading = (props) => {
     }
     onScroll && onScroll(e.target.scrollTop);
   };
-  const lower = () => {
+  const lower = async () => {
     if (!hasMore || isInfiniting) {
       return false;
     }
     setIsInfiniting(true);
-    onLoadMore && onLoadMore(infiniteDone);
+    await (onLoadMore == null ? void 0 : onLoadMore());
+    infiniteDone();
   };
   const touchStart = (event) => {
     if (scrollTop.current === 0 && !isTouching.current && pullRefresh) {
@@ -14957,12 +14956,13 @@ const InfiniteLoading = (props) => {
       isTouching.current = false;
     }
   };
-  const touchEnd = () => {
+  const touchEnd = async () => {
     if (distance.current < refreshMaxH.current) {
       distance.current = 0;
       setTopDisScoll(0);
     } else {
-      onRefresh && onRefresh(refreshDone);
+      await (onRefresh == null ? void 0 : onRefresh());
+      refreshDone();
     }
   };
   return /* @__PURE__ */ React__default.createElement(
@@ -14979,9 +14979,9 @@ const InfiniteLoading = (props) => {
       onTouchMove: touchMove,
       onTouchEnd: touchEnd
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: "nut-infinite-top", ref: refreshTop, style: getStyle() }, /* @__PURE__ */ React__default.createElement("div", { className: "top-box" }, pullingText || locale.infiniteloading.pullRefreshText)),
+    /* @__PURE__ */ React__default.createElement("div", { className: "nut-infinite-top", ref: refreshTop, style: getStyle() }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-infinite-top-tips" }, pullingText || locale.infiniteloading.pullRefreshText)),
     /* @__PURE__ */ React__default.createElement("div", { className: "nut-infinite-container" }, children),
-    /* @__PURE__ */ React__default.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? /* @__PURE__ */ React__default.createElement("div", { className: "bottom-box" }, loadingText || locale.infiniteloading.loadText) : !hasMore && /* @__PURE__ */ React__default.createElement("div", { className: "bottom-box" }, loadMoreText || locale.infiniteloading.loadMoreText))
+    /* @__PURE__ */ React__default.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-infinite-bottom-tips" }, loadingText || locale.infiniteloading.loadText) : !hasMore && /* @__PURE__ */ React__default.createElement("div", { className: "nut-infinite-bottom-tips" }, loadMoreText || locale.infiniteloading.loadMoreText))
   );
 };
 InfiniteLoading.defaultProps = defaultProps$D;
@@ -15775,10 +15775,10 @@ const Popover = (props) => {
           key: item.key || index,
           onClick: () => handleSelect(item, index)
         },
-        item.icon ? /* @__PURE__ */ React__default.createElement("i", { className: "nut-popover-menu-item-icon" }, item.icon) : null,
+        item.icon ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-popover-menu-item-icon" }, item.icon) : null,
         /* @__PURE__ */ React__default.createElement("div", { className: "nut-popover-menu-item-name" }, item.name),
         item.action && item.action.icon ? /* @__PURE__ */ React__default.createElement(
-          "i",
+          "div",
           {
             className: "nut-popover-menu-item-action-icon",
             onClick: (e) => {
@@ -19070,37 +19070,16 @@ const initPositinoCache = (reaItemSize, length = 0) => {
   }
   return positions;
 };
-const binarySearch = (positionsList, horizontal, value = 0) => {
-  let start = 0;
-  let end = positionsList.length - 1;
-  let tempIndex = null;
-  const key = horizontal ? "right" : "bottom";
-  while (start <= end) {
-    const midIndex = Math.floor((start + end) / 2);
-    const midValue = positionsList[midIndex][key];
-    if (midValue === value) {
-      return midIndex + 1;
-    }
-    if (midValue < value) {
-      start = midIndex + 1;
-    } else if (midValue > value) {
-      if (tempIndex === null || tempIndex > midIndex) {
-        tempIndex = midIndex;
-      }
-      end = midIndex - 1;
-    }
-  }
-  tempIndex = tempIndex || 0;
-  return tempIndex;
-};
-const updateItemSize = (positions, items, sizeKey) => {
+const updateItemSize = (positions, items, sizeKey, margin) => {
   const newPos = positions.concat();
   Array.from(items).forEach((item) => {
     const index = Number(item.getAttribute("data-index"));
     const styleVal = item.getAttribute("style");
     if (styleVal && styleVal.includes("none"))
       return;
-    const nowSize = item.getBoundingClientRect()[sizeKey];
+    let nowSize = item.getBoundingClientRect()[sizeKey];
+    if (margin)
+      nowSize += margin;
     const oldSize = positions[index][sizeKey];
     const dValue = oldSize - nowSize;
     if (dValue) {
@@ -19128,6 +19107,7 @@ const defaultProps$7 = {
   list: [],
   containerHeight: clientHeight,
   itemHeight: 66,
+  margin: 10,
   itemEqual: true,
   overscan: 2
 };
@@ -19136,6 +19116,7 @@ const VirtualList = (props) => {
     list,
     itemRender,
     itemHeight,
+    margin,
     itemEqual,
     overscan,
     key,
@@ -19148,7 +19129,7 @@ const VirtualList = (props) => {
     ...props
   };
   const [startOffset, setStartOffset] = useState(0);
-  const [start, setStart] = useState(0);
+  const start = useRef(0);
   const scrollRef = useRef(null);
   const itemsRef = useRef(null);
   const [positions, setPositions] = useState([
@@ -19163,18 +19144,9 @@ const VirtualList = (props) => {
     }
   ]);
   const [offSetSize, setOffSetSize] = useState(containerHeight || 0);
-  const [options, setOptions] = useState({
-    startOffset: 0,
-    // 可视区域距离顶部的偏移量
-    startIndex: 0,
-    // 可视区域开始索引
-    overStart: 0,
-    endIndex: 10
-    // 可视区域结束索引
-  });
   useEffect(() => {
-    setPositions((options2) => {
-      return { ...options2, endIndex: visibleCount() };
+    setPositions((options) => {
+      return { ...options, endIndex: visibleCount() };
     });
   }, [itemHeight, overscan, offSetSize]);
   useEffect(() => {
@@ -19183,24 +19155,25 @@ const VirtualList = (props) => {
     setOffSetSize(getContainerHeight());
   }, [containerHeight]);
   useEffect(() => {
-    const pos = initPositinoCache(itemHeight, list.length);
+    const pos = initPositinoCache(itemHeight + margin, list.length);
     setPositions(pos);
   }, [itemHeight, list]);
+  const prevListLength = useRef(list.length);
   const getContainerHeight = () => {
-    const initH = itemHeight * list.length;
-    return initH < clientHeight ? initH + overscan * itemHeight - 5 : Math.min(containerHeight, clientHeight);
+    const initH = (itemHeight + margin) * list.length;
+    return initH < clientHeight ? initH + overscan * (itemHeight + margin) - 5 : Math.min(containerHeight, clientHeight);
   };
   const visibleCount = () => {
-    return Math.ceil(getContainerHeight() / itemHeight) + overscan;
+    return Math.ceil(getContainerHeight() / (itemHeight + margin)) + overscan;
   };
   const end = () => {
-    return start + visibleCount();
+    return start.current + visibleCount();
   };
   const listHeight = () => {
-    return list.length * itemHeight;
+    return list.length * (itemHeight + margin);
   };
   const visibleData = () => {
-    return list.slice(start, Math.min(end(), list.length));
+    return list.slice(start.current, Math.min(end(), list.length));
   };
   const updateTotalSize = useCallback(() => {
     if (!itemsRef.current)
@@ -19208,26 +19181,27 @@ const VirtualList = (props) => {
     const items = itemsRef.current.children;
     if (!items.length)
       return;
-    updateItemSize(positions, items, "height");
+    updateItemSize(positions, items, "height", margin);
   }, [positions]);
   const listScroll = (e) => {
     const scrollTop = e.target.scrollTop;
-    const scrollSize = Math.floor(scrollTop);
-    const startIndex = binarySearch(positions, false, scrollSize);
-    const overStart = startIndex - overscan > -1 ? startIndex - overscan : 0;
-    const endIndex = end();
+    if (scrollTop <= 0) {
+      e.target.scrollTop = 0;
+      return setStartOffset(0);
+    }
     if (!itemEqual) {
       updateTotalSize();
     }
-    setStart(Math.floor(scrollTop / itemHeight));
-    setOptions({ startOffset, startIndex, overStart, endIndex });
-    if (end() > list.length - 1) {
+    start.current = Math.floor(scrollTop / (itemHeight + margin));
+    setStartOffset(scrollTop - scrollTop % (itemHeight + margin));
+    const endIndex = end();
+    if (endIndex > list.length - 1 && prevListLength.current < list.length) {
       onScroll && onScroll();
+      prevListLength.current = list.length;
     }
-    setStartOffset(scrollTop - scrollTop % itemHeight);
   };
   return /* @__PURE__ */ React__default.createElement(
-    "div",
+    View,
     {
       className: classNames("nut-virtualList-box", className),
       ...rest,
@@ -19239,6 +19213,7 @@ const VirtualList = (props) => {
       ScrollView,
       {
         scrollY: true,
+        bounces: false,
         type: "list",
         ref: scrollRef,
         className: "nut-virtuallist",
@@ -19248,25 +19223,24 @@ const VirtualList = (props) => {
         onScroll: listScroll
       },
       /* @__PURE__ */ React__default.createElement(
-        "div",
+        View,
         {
           className: "nut-virtuallist-phantom",
           style: { height: `${listHeight()}px` }
         }
       ),
       /* @__PURE__ */ React__default.createElement(
-        "div",
+        View,
         {
           className: "nut-virtuallist-container",
           ref: itemsRef,
           style: { transform: `translate3d(0, ${startOffset}px, 0)` }
         },
         visibleData().map((data, index) => {
-          const { overStart } = options;
-          const dataIndex = overStart + index;
+          const dataIndex = start.current + index;
           const keyVal = key && data[key] ? data[key] : dataIndex;
           return /* @__PURE__ */ React__default.createElement(
-            "div",
+            View,
             {
               "data-index": `${dataIndex}`,
               className: "nut-virtuallist-item",

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.3.3 Fri Dec 22 2023 17:47:39 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.3.4 Fri Dec 29 2023 14:38:58 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -9251,9 +9251,7 @@ Check the top-level render call using <` + t2 + ">.");
       return val || [];
     };
     React.useEffect(() => {
-      if (selectedDate) {
-        setPickerOptions(columns());
-      }
+      setPickerOptions(columns());
     }, [selectedDate, startDate, endDate]);
     return /* @__PURE__ */ React.createElement(
       components.View,
@@ -14945,12 +14943,13 @@ Check the top-level render call using <` + t2 + ">.");
       }
       onScroll && onScroll(e.target.scrollTop);
     };
-    const lower = () => {
+    const lower = async () => {
       if (!hasMore || isInfiniting) {
         return false;
       }
       setIsInfiniting(true);
-      onLoadMore && onLoadMore(infiniteDone);
+      await (onLoadMore == null ? void 0 : onLoadMore());
+      infiniteDone();
     };
     const touchStart = (event) => {
       if (scrollTop.current === 0 && !isTouching.current && pullRefresh) {
@@ -14973,12 +14972,13 @@ Check the top-level render call using <` + t2 + ">.");
         isTouching.current = false;
       }
     };
-    const touchEnd = () => {
+    const touchEnd = async () => {
       if (distance.current < refreshMaxH.current) {
         distance.current = 0;
         setTopDisScoll(0);
       } else {
-        onRefresh && onRefresh(refreshDone);
+        await (onRefresh == null ? void 0 : onRefresh());
+        refreshDone();
       }
     };
     return /* @__PURE__ */ React.createElement(
@@ -14995,9 +14995,9 @@ Check the top-level render call using <` + t2 + ">.");
         onTouchMove: touchMove,
         onTouchEnd: touchEnd
       },
-      /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-top", ref: refreshTop, style: getStyle() }, /* @__PURE__ */ React.createElement("div", { className: "top-box" }, pullingText || locale.infiniteloading.pullRefreshText)),
+      /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-top", ref: refreshTop, style: getStyle() }, /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-top-tips" }, pullingText || locale.infiniteloading.pullRefreshText)),
       /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-container" }, children),
-      /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? /* @__PURE__ */ React.createElement("div", { className: "bottom-box" }, loadingText || locale.infiniteloading.loadText) : !hasMore && /* @__PURE__ */ React.createElement("div", { className: "bottom-box" }, loadMoreText || locale.infiniteloading.loadMoreText))
+      /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-bottom-tips" }, loadingText || locale.infiniteloading.loadText) : !hasMore && /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-bottom-tips" }, loadMoreText || locale.infiniteloading.loadMoreText))
     );
   };
   InfiniteLoading.defaultProps = defaultProps$D;
@@ -15791,10 +15791,10 @@ Check the top-level render call using <` + t2 + ">.");
             key: item.key || index,
             onClick: () => handleSelect(item, index)
           },
-          item.icon ? /* @__PURE__ */ React.createElement("i", { className: "nut-popover-menu-item-icon" }, item.icon) : null,
+          item.icon ? /* @__PURE__ */ React.createElement("div", { className: "nut-popover-menu-item-icon" }, item.icon) : null,
           /* @__PURE__ */ React.createElement("div", { className: "nut-popover-menu-item-name" }, item.name),
           item.action && item.action.icon ? /* @__PURE__ */ React.createElement(
-            "i",
+            "div",
             {
               className: "nut-popover-menu-item-action-icon",
               onClick: (e) => {
@@ -19086,37 +19086,16 @@ Check the top-level render call using <` + t2 + ">.");
     }
     return positions;
   };
-  const binarySearch = (positionsList, horizontal, value = 0) => {
-    let start = 0;
-    let end = positionsList.length - 1;
-    let tempIndex = null;
-    const key = horizontal ? "right" : "bottom";
-    while (start <= end) {
-      const midIndex = Math.floor((start + end) / 2);
-      const midValue = positionsList[midIndex][key];
-      if (midValue === value) {
-        return midIndex + 1;
-      }
-      if (midValue < value) {
-        start = midIndex + 1;
-      } else if (midValue > value) {
-        if (tempIndex === null || tempIndex > midIndex) {
-          tempIndex = midIndex;
-        }
-        end = midIndex - 1;
-      }
-    }
-    tempIndex = tempIndex || 0;
-    return tempIndex;
-  };
-  const updateItemSize = (positions, items, sizeKey) => {
+  const updateItemSize = (positions, items, sizeKey, margin) => {
     const newPos = positions.concat();
     Array.from(items).forEach((item) => {
       const index = Number(item.getAttribute("data-index"));
       const styleVal = item.getAttribute("style");
       if (styleVal && styleVal.includes("none"))
         return;
-      const nowSize = item.getBoundingClientRect()[sizeKey];
+      let nowSize = item.getBoundingClientRect()[sizeKey];
+      if (margin)
+        nowSize += margin;
       const oldSize = positions[index][sizeKey];
       const dValue = oldSize - nowSize;
       if (dValue) {
@@ -19144,6 +19123,7 @@ Check the top-level render call using <` + t2 + ">.");
     list: [],
     containerHeight: clientHeight,
     itemHeight: 66,
+    margin: 10,
     itemEqual: true,
     overscan: 2
   };
@@ -19152,6 +19132,7 @@ Check the top-level render call using <` + t2 + ">.");
       list,
       itemRender,
       itemHeight,
+      margin,
       itemEqual,
       overscan,
       key,
@@ -19164,7 +19145,7 @@ Check the top-level render call using <` + t2 + ">.");
       ...props
     };
     const [startOffset, setStartOffset] = React.useState(0);
-    const [start, setStart] = React.useState(0);
+    const start = React.useRef(0);
     const scrollRef = React.useRef(null);
     const itemsRef = React.useRef(null);
     const [positions, setPositions] = React.useState([
@@ -19179,18 +19160,9 @@ Check the top-level render call using <` + t2 + ">.");
       }
     ]);
     const [offSetSize, setOffSetSize] = React.useState(containerHeight || 0);
-    const [options, setOptions] = React.useState({
-      startOffset: 0,
-      // 可视区域距离顶部的偏移量
-      startIndex: 0,
-      // 可视区域开始索引
-      overStart: 0,
-      endIndex: 10
-      // 可视区域结束索引
-    });
     React.useEffect(() => {
-      setPositions((options2) => {
-        return { ...options2, endIndex: visibleCount() };
+      setPositions((options) => {
+        return { ...options, endIndex: visibleCount() };
       });
     }, [itemHeight, overscan, offSetSize]);
     React.useEffect(() => {
@@ -19199,24 +19171,25 @@ Check the top-level render call using <` + t2 + ">.");
       setOffSetSize(getContainerHeight());
     }, [containerHeight]);
     React.useEffect(() => {
-      const pos = initPositinoCache(itemHeight, list.length);
+      const pos = initPositinoCache(itemHeight + margin, list.length);
       setPositions(pos);
     }, [itemHeight, list]);
+    const prevListLength = React.useRef(list.length);
     const getContainerHeight = () => {
-      const initH = itemHeight * list.length;
-      return initH < clientHeight ? initH + overscan * itemHeight - 5 : Math.min(containerHeight, clientHeight);
+      const initH = (itemHeight + margin) * list.length;
+      return initH < clientHeight ? initH + overscan * (itemHeight + margin) - 5 : Math.min(containerHeight, clientHeight);
     };
     const visibleCount = () => {
-      return Math.ceil(getContainerHeight() / itemHeight) + overscan;
+      return Math.ceil(getContainerHeight() / (itemHeight + margin)) + overscan;
     };
     const end = () => {
-      return start + visibleCount();
+      return start.current + visibleCount();
     };
     const listHeight = () => {
-      return list.length * itemHeight;
+      return list.length * (itemHeight + margin);
     };
     const visibleData = () => {
-      return list.slice(start, Math.min(end(), list.length));
+      return list.slice(start.current, Math.min(end(), list.length));
     };
     const updateTotalSize = React.useCallback(() => {
       if (!itemsRef.current)
@@ -19224,26 +19197,27 @@ Check the top-level render call using <` + t2 + ">.");
       const items = itemsRef.current.children;
       if (!items.length)
         return;
-      updateItemSize(positions, items, "height");
+      updateItemSize(positions, items, "height", margin);
     }, [positions]);
     const listScroll = (e) => {
       const scrollTop = e.target.scrollTop;
-      const scrollSize = Math.floor(scrollTop);
-      const startIndex = binarySearch(positions, false, scrollSize);
-      const overStart = startIndex - overscan > -1 ? startIndex - overscan : 0;
-      const endIndex = end();
+      if (scrollTop <= 0) {
+        e.target.scrollTop = 0;
+        return setStartOffset(0);
+      }
       if (!itemEqual) {
         updateTotalSize();
       }
-      setStart(Math.floor(scrollTop / itemHeight));
-      setOptions({ startOffset, startIndex, overStart, endIndex });
-      if (end() > list.length - 1) {
+      start.current = Math.floor(scrollTop / (itemHeight + margin));
+      setStartOffset(scrollTop - scrollTop % (itemHeight + margin));
+      const endIndex = end();
+      if (endIndex > list.length - 1 && prevListLength.current < list.length) {
         onScroll && onScroll();
+        prevListLength.current = list.length;
       }
-      setStartOffset(scrollTop - scrollTop % itemHeight);
     };
     return /* @__PURE__ */ React.createElement(
-      "div",
+      components.View,
       {
         className: classNames("nut-virtualList-box", className),
         ...rest,
@@ -19255,6 +19229,7 @@ Check the top-level render call using <` + t2 + ">.");
         components.ScrollView,
         {
           scrollY: true,
+          bounces: false,
           type: "list",
           ref: scrollRef,
           className: "nut-virtuallist",
@@ -19264,25 +19239,24 @@ Check the top-level render call using <` + t2 + ">.");
           onScroll: listScroll
         },
         /* @__PURE__ */ React.createElement(
-          "div",
+          components.View,
           {
             className: "nut-virtuallist-phantom",
             style: { height: `${listHeight()}px` }
           }
         ),
         /* @__PURE__ */ React.createElement(
-          "div",
+          components.View,
           {
             className: "nut-virtuallist-container",
             ref: itemsRef,
             style: { transform: `translate3d(0, ${startOffset}px, 0)` }
           },
           visibleData().map((data, index) => {
-            const { overStart } = options;
-            const dataIndex = overStart + index;
+            const dataIndex = start.current + index;
             const keyVal = key && data[key] ? data[key] : dataIndex;
             return /* @__PURE__ */ React.createElement(
-              "div",
+              components.View,
               {
                 "data-index": `${dataIndex}`,
                 className: "nut-virtuallist-item",

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -11,7 +11,7 @@
     font-size: $font-size-small;
     color: $infiniteloading-color;
 
-    .top-box {
+    &-tips {
       width: 100%;
       display: flex;
       flex-direction: column;
@@ -21,8 +21,6 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        width: $pulltorefresh-icon-width;
-        height: $pulltorefresh-icon-height;
         margin-bottom: 4px;
       }
     }
@@ -38,14 +36,12 @@
     color: $infiniteloading-color;
     text-align: center;
 
-    .bottom-box {
+    &-tips {
       display: flex;
       justify-content: center;
       align-items: center;
 
       &-icons {
-        width: $infiniteloading-icon-size;
-        height: $infiniteloading-icon-size;
         margin-right: 8px;
       }
     }

package/dist/packages/popover/popover.scss

@@ -22,21 +22,6 @@
       border-bottom-color: $popover-border-color;
       border-top-width: 0;
       margin-top: -8px;
-
-      &.nut-popover-arrow-bottom {
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      &.nut-popover-arrow-bottom-start {
-        left: 16px;
-        transform: translateX(0%);
-      }
-
-      &.nut-popover-arrow-bottom-end {
-        right: 16px;
-        transform: translateX(0%);
-      }
     }
 
     &-left {
@@ -189,10 +174,31 @@
       }
     }
 
+    &-bottom {
+      .nut-popover-arrow-bottom {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
     &-bottom-end {
+      .nut-popover-arrow-bottom-end {
+        right: 16px;
+        transform: translateX(0%);
+      }
+
       right: 0;
     }
 
+    &-bottom-start {
+      left: 0;
+
+      .nut-popover-arrow-bottom-start {
+        left: 16px;
+        transform: translateX(0%);
+      }
+    }
+
     &-left-end {
       bottom: 0;
     }

package/dist/packages/tabbaritem/tabbaritem.scss

@@ -10,10 +10,6 @@
   color: $tabbar-inactive-color;
   height: 100%;
 
-  &-active {
-    color: $tabbar-active-color;
-  }
-
   &-icon-box {
     padding: 0px;
     display: flex;
@@ -40,4 +36,14 @@
       font-weight: $tabbar-text-large-font-weight;
     }
   }
+
+  &-active {
+    color: $tabbar-active-color;
+    .nut-tabbar-item-icon-box {
+      color: inherit;
+      .nut-icon {
+        color: inherit;
+      }
+    }
+  }
 }