@tuya-miniapp/smart-ui 2.12.0-beta-6 → 2.12.0

package/dist/index-bar/index.js

@@ -61,7 +61,7 @@ SmartComponent({
     ],
     data: {
         iconSvg,
-        activeAnchorIndex: null,
+        activeAnchorIndexData: null,
         showSidebar: false,
         showMoveIcon: false,
         lowestActiveIndex: -1,
@@ -203,6 +203,9 @@ SmartComponent({
                 top: rect.top,
             }));
         },
+        getChildrenIndexList() {
+            return this.children.map(item => item.data.index);
+        },
         getActiveAnchorIndex() {
             const { children, scrollTop } = this;
             const { sticky, stickyOffsetTop } = this.data;
@@ -215,13 +218,15 @@ SmartComponent({
             }
             return -1;
         },
-        onScroll(controlActiveIndex) {
+        onScroll(controlActiveIndexData) {
+            var _a, _b, _c, _d;
             const { children = [], scrollTop } = this;
             if (!children.length) {
                 return;
             }
-            const hasIndex = controlActiveIndex !== undefined;
-            const currScrollGetIndex = this.getActiveAnchorIndex();
+            const hasIndex = controlActiveIndexData !== undefined;
+            const scrollChildrenGetIndex = this.getActiveAnchorIndex();
+            const scrollChildrenGetIndexData = (_a = this.children[scrollChildrenGetIndex]) === null || _a === void 0 ? void 0 : _a.data.index;
             // 程序化滚动（如 sidebar 点击）未完成时，不根据当前 scrollTop 更新 UI，
             // 避免 scrollTop 已变而 anchor 几何未重测导致 getActiveAnchorIndex 算错引发闪动。
             // 滚动结束后在 scrollToAnchor 的 then 里会 setRect + onScroll 做一次正确更新。
@@ -230,21 +235,29 @@ SmartComponent({
             }
             // lowestActiveIndex 已改为在 setRect 后由 computeLowestActiveIndex() 几何计算，此处不再根据滚动推断
             const { sticky, stickyOffsetTop, zIndex, highlightColor } = this.data;
-            const active = hasIndex ? controlActiveIndex : currScrollGetIndex;
+            const activeData = hasIndex ? controlActiveIndexData : scrollChildrenGetIndexData;
+            if (activeData === undefined) {
+                return;
+            }
+            const activeIndex = this.children.findIndex(item => item.data.index === activeData);
+            const preActiveData = (_c = (_b = this.children[activeIndex - 1]) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.index;
             this.setDiffData({
                 target: this,
                 data: {
-                    activeAnchorIndex: active,
+                    activeAnchorIndexData: activeData,
                 },
             });
             if (sticky) {
                 let isActiveAnchorSticky = false;
-                if (active !== -1) {
-                    isActiveAnchorSticky = children[active].top <= stickyOffsetTop + scrollTop;
+                if (activeData !== null) {
+                    isActiveAnchorSticky =
+                        ((_d = children.find(item => item.data.index === activeData)) === null || _d === void 0 ? void 0 : _d.top) <=
+                            stickyOffsetTop + scrollTop;
                 }
                 children.forEach((item, index) => {
+                    const itemData = item.data.index;
                     // 为当前的 anchor 设置 fixed 吸顶和文字颜色
-                    if (index === active) {
+                    if (itemData === activeData) {
                         let wrapperStyle = '';
                         let anchorStyle = `
               color: ${highlightColor};
@@ -270,7 +283,7 @@ SmartComponent({
                         });
                         // 滚动模式时 上一个tab 要有种慢慢被滚动切换的效果
                     }
-                    else if (index === active - 1 && !hasIndex) {
+                    else if (preActiveData === itemData && !hasIndex) {
                         const currentAnchor = children[index];
                         const currentOffsetTop = currentAnchor.top;
                         const targetOffsetTop = index === children.length - 1 ? this.top : children[index + 1].top;
@@ -306,34 +319,36 @@ SmartComponent({
         },
         onClick(event) {
             ty.vibrateShort({ type: 'light' });
-            this.scrollToAnchor(event.target.dataset.index);
+            this.scrollToAnchor(event.target.dataset.item);
         },
         onTouchMove(event) {
             if (!this.data.scrollable)
                 return;
-            const sidebarLength = this.children.length;
+            const sidebarLength = this.data.indexList.length;
             const touch = event.touches[0];
             let offsetY = touch.clientY - this.sidebar.top;
-            const threshold = this.sidebar.height * 0.25;
+            const threshold = (this.sidebar.height / sidebarLength) * 3;
             if (!this.lastValidOffsetYHistory) {
                 this.lastValidOffsetYHistory = [];
             }
             const nearCount = this.lastValidOffsetYHistory.filter(h => Math.abs(offsetY - h) < threshold).length;
+            this.lastValidOffsetYHistory.push(offsetY);
+            if (this.lastValidOffsetYHistory.length > 3)
+                this.lastValidOffsetYHistory.shift();
             // 与最近 3 次中至少 2 个都超阈值则判定本帧为异常，沿用上次有效值
             if (this.lastValidOffsetYHistory.length === 3 && nearCount < 2) {
                 return;
             }
-            this.lastValidOffsetYHistory.push(offsetY);
-            if (this.lastValidOffsetYHistory.length > 3)
-                this.lastValidOffsetYHistory.shift();
             offsetY = Math.max(0, Math.min(offsetY, this.sidebar.height));
             const itemHeight = this.sidebar.height / sidebarLength;
             const index = Math.floor(offsetY / itemHeight);
+            const indexData = this.data.indexList[index];
             this.setData({
                 showMoveIcon: true,
                 moveTipTop: index * itemHeight + itemHeight / 2,
+                currentMoveIconText: indexData,
             });
-            this.scrollToAnchor(index);
+            this.scrollToAnchor(indexData);
         },
         onTouchStop() {
             if (!this.data.scrollable)
@@ -341,20 +356,22 @@ SmartComponent({
             this.setData({
                 showMoveIcon: false,
             });
-            this.scrollToAnchorIndex = null;
+            this.scrollToAnchorIndexData = null;
             this.lastValidOffsetYHistory = [];
         },
-        scrollToAnchor(index) {
-            if (typeof index !== 'number' || this.scrollToAnchorIndex === index) {
+        scrollToAnchor(indexData) {
+            if (typeof indexData !== 'string' || this.scrollToAnchorIndexData === indexData) {
                 return;
             }
-            const safeIndex = this.data.lowestActiveIndex !== -1 && index > this.data.lowestActiveIndex
+            const childrenIndex = this.children.findIndex(item => item.data.index === indexData);
+            const anchor = this.children[childrenIndex];
+            const safeIndex = this.data.lowestActiveIndex !== -1 && childrenIndex > this.data.lowestActiveIndex
                 ? this.data.lowestActiveIndex
-                : index;
-            const safeAnchor = this.children.find(item => item.data.index === this.data.indexList[safeIndex]);
-            const anchor = this.children.find(item => item.data.index === this.data.indexList[index]);
-            if (!anchor || !safeAnchor)
+                : childrenIndex;
+            const safeAnchor = this.children[safeIndex];
+            if (!safeAnchor) {
                 return;
+            }
             // 如果当前有正在进行的滚动，将新的滚动任务加入队列
             if (!this.pendingAnchor) {
                 this.pendingAnchor = [];
@@ -364,18 +381,15 @@ SmartComponent({
                 return;
             }
             this.pendingAnchor = [anchor];
-            this.scrollToAnchorIndex = index;
-            this.setData({
-                currentMoveIconText: anchor.data.index,
-            });
+            this.scrollToAnchorIndexData = indexData;
             safeAnchor
                 .scrollIntoView(this.scrollTop)
                 .then(() => {
-                this.onScroll(safeIndex);
+                this.onScroll(safeAnchor.data.index);
                 if (this.pendingAnchor.length > 0 && this.pendingAnchor[0] !== anchor) {
-                    const index = this.data.indexList.indexOf(this.pendingAnchor[0].data.index);
+                    const dataIndex = this.pendingAnchor[0].data.index;
                     this.pendingAnchor = [];
-                    this.scrollToAnchor(index);
+                    this.scrollToAnchor(dataIndex);
                     return;
                 }
                 this.pendingAnchor = [];
@@ -383,9 +397,9 @@ SmartComponent({
                 .catch(err => {
                 console.error(err);
                 if (this.pendingAnchor.length > 0 && this.pendingAnchor[0] !== anchor) {
-                    const index = this.data.indexList.indexOf(this.pendingAnchor[0].data.index);
+                    const dataIndex = this.pendingAnchor[0].data.index;
                     this.pendingAnchor = [];
-                    this.scrollToAnchor(index);
+                    this.scrollToAnchor(dataIndex);
                     return;
                 }
                 this.pendingAnchor = [];

package/dist/index-bar/index.wxml

@@ -24,8 +24,9 @@
       wx:for="{{ indexList }}"
       wx:key="index"
       class="smart-index-bar__index"
-      style="z-index: {{ zIndex + 1 }};color: {{ activeAnchorIndex === index ? highlightColor : '' }};font-size: {{ sidebarFontSize }};line-height: {{ sidebarLineHeight }};"
+      style="z-index: {{ zIndex + 1 }};color: {{ activeAnchorIndexData === item ? highlightColor : '' }};font-size: {{ sidebarFontSize }};line-height: {{ sidebarLineHeight }};"
       data-index="{{ index }}"
+      data-item="{{ item }}"
     >
       {{ item }}
     </view>

package/lib/index-bar/index.js

@@ -66,7 +66,7 @@ var indexList = function () {
     ],
     data: {
         iconSvg: icon_1.default,
-        activeAnchorIndex: null,
+        activeAnchorIndexData: null,
         showSidebar: false,
         showMoveIcon: false,
         lowestActiveIndex: -1,
@@ -216,6 +216,9 @@ var indexList = function () {
                 top: rect.top,
             }); });
         },
+        getChildrenIndexList: function () {
+            return this.children.map(function (item) { return item.data.index; });
+        },
         getActiveAnchorIndex: function () {
             var _a = this, children = _a.children, scrollTop = _a.scrollTop;
             var _b = this.data, sticky = _b.sticky, stickyOffsetTop = _b.stickyOffsetTop;
@@ -228,14 +231,16 @@ var indexList = function () {
             }
             return -1;
         },
-        onScroll: function (controlActiveIndex) {
+        onScroll: function (controlActiveIndexData) {
             var _this = this;
-            var _a = this, _b = _a.children, children = _b === void 0 ? [] : _b, scrollTop = _a.scrollTop;
+            var _a, _b, _c, _d;
+            var _e = this, _f = _e.children, children = _f === void 0 ? [] : _f, scrollTop = _e.scrollTop;
             if (!children.length) {
                 return;
             }
-            var hasIndex = controlActiveIndex !== undefined;
-            var currScrollGetIndex = this.getActiveAnchorIndex();
+            var hasIndex = controlActiveIndexData !== undefined;
+            var scrollChildrenGetIndex = this.getActiveAnchorIndex();
+            var scrollChildrenGetIndexData = (_a = this.children[scrollChildrenGetIndex]) === null || _a === void 0 ? void 0 : _a.data.index;
             // 程序化滚动（如 sidebar 点击）未完成时，不根据当前 scrollTop 更新 UI，
             // 避免 scrollTop 已变而 anchor 几何未重测导致 getActiveAnchorIndex 算错引发闪动。
             // 滚动结束后在 scrollToAnchor 的 then 里会 setRect + onScroll 做一次正确更新。
@@ -243,22 +248,30 @@ var indexList = function () {
                 return;
             }
             // lowestActiveIndex 已改为在 setRect 后由 computeLowestActiveIndex() 几何计算，此处不再根据滚动推断
-            var _c = this.data, sticky = _c.sticky, stickyOffsetTop = _c.stickyOffsetTop, zIndex = _c.zIndex, highlightColor = _c.highlightColor;
-            var active = hasIndex ? controlActiveIndex : currScrollGetIndex;
+            var _g = this.data, sticky = _g.sticky, stickyOffsetTop = _g.stickyOffsetTop, zIndex = _g.zIndex, highlightColor = _g.highlightColor;
+            var activeData = hasIndex ? controlActiveIndexData : scrollChildrenGetIndexData;
+            if (activeData === undefined) {
+                return;
+            }
+            var activeIndex = this.children.findIndex(function (item) { return item.data.index === activeData; });
+            var preActiveData = (_c = (_b = this.children[activeIndex - 1]) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.index;
             this.setDiffData({
                 target: this,
                 data: {
-                    activeAnchorIndex: active,
+                    activeAnchorIndexData: activeData,
                 },
             });
             if (sticky) {
                 var isActiveAnchorSticky_1 = false;
-                if (active !== -1) {
-                    isActiveAnchorSticky_1 = children[active].top <= stickyOffsetTop + scrollTop;
+                if (activeData !== null) {
+                    isActiveAnchorSticky_1 =
+                        ((_d = children.find(function (item) { return item.data.index === activeData; })) === null || _d === void 0 ? void 0 : _d.top) <=
+                            stickyOffsetTop + scrollTop;
                 }
                 children.forEach(function (item, index) {
+                    var itemData = item.data.index;
                     // 为当前的 anchor 设置 fixed 吸顶和文字颜色
-                    if (index === active) {
+                    if (itemData === activeData) {
                         var wrapperStyle = '';
                         var anchorStyle = "\n              color: ".concat(highlightColor, ";\n            ");
                         if (isActiveAnchorSticky_1) {
@@ -275,7 +288,7 @@ var indexList = function () {
                         });
                         // 滚动模式时 上一个tab 要有种慢慢被滚动切换的效果
                     }
-                    else if (index === active - 1 && !hasIndex) {
+                    else if (preActiveData === itemData && !hasIndex) {
                         var currentAnchor = children[index];
                         var currentOffsetTop = currentAnchor.top;
                         var targetOffsetTop = index === children.length - 1 ? _this.top : children[index + 1].top;
@@ -306,34 +319,36 @@ var indexList = function () {
         },
         onClick: function (event) {
             ty_1.default.vibrateShort({ type: 'light' });
-            this.scrollToAnchor(event.target.dataset.index);
+            this.scrollToAnchor(event.target.dataset.item);
         },
         onTouchMove: function (event) {
             if (!this.data.scrollable)
                 return;
-            var sidebarLength = this.children.length;
+            var sidebarLength = this.data.indexList.length;
             var touch = event.touches[0];
             var offsetY = touch.clientY - this.sidebar.top;
-            var threshold = this.sidebar.height * 0.25;
+            var threshold = (this.sidebar.height / sidebarLength) * 3;
             if (!this.lastValidOffsetYHistory) {
                 this.lastValidOffsetYHistory = [];
             }
             var nearCount = this.lastValidOffsetYHistory.filter(function (h) { return Math.abs(offsetY - h) < threshold; }).length;
+            this.lastValidOffsetYHistory.push(offsetY);
+            if (this.lastValidOffsetYHistory.length > 3)
+                this.lastValidOffsetYHistory.shift();
             // 与最近 3 次中至少 2 个都超阈值则判定本帧为异常，沿用上次有效值
             if (this.lastValidOffsetYHistory.length === 3 && nearCount < 2) {
                 return;
             }
-            this.lastValidOffsetYHistory.push(offsetY);
-            if (this.lastValidOffsetYHistory.length > 3)
-                this.lastValidOffsetYHistory.shift();
             offsetY = Math.max(0, Math.min(offsetY, this.sidebar.height));
             var itemHeight = this.sidebar.height / sidebarLength;
             var index = Math.floor(offsetY / itemHeight);
+            var indexData = this.data.indexList[index];
             this.setData({
                 showMoveIcon: true,
                 moveTipTop: index * itemHeight + itemHeight / 2,
+                currentMoveIconText: indexData,
             });
-            this.scrollToAnchor(index);
+            this.scrollToAnchor(indexData);
         },
         onTouchStop: function () {
             if (!this.data.scrollable)
@@ -341,21 +356,23 @@ var indexList = function () {
             this.setData({
                 showMoveIcon: false,
             });
-            this.scrollToAnchorIndex = null;
+            this.scrollToAnchorIndexData = null;
             this.lastValidOffsetYHistory = [];
         },
-        scrollToAnchor: function (index) {
+        scrollToAnchor: function (indexData) {
             var _this = this;
-            if (typeof index !== 'number' || this.scrollToAnchorIndex === index) {
+            if (typeof indexData !== 'string' || this.scrollToAnchorIndexData === indexData) {
                 return;
             }
-            var safeIndex = this.data.lowestActiveIndex !== -1 && index > this.data.lowestActiveIndex
+            var childrenIndex = this.children.findIndex(function (item) { return item.data.index === indexData; });
+            var anchor = this.children[childrenIndex];
+            var safeIndex = this.data.lowestActiveIndex !== -1 && childrenIndex > this.data.lowestActiveIndex
                 ? this.data.lowestActiveIndex
-                : index;
-            var safeAnchor = this.children.find(function (item) { return item.data.index === _this.data.indexList[safeIndex]; });
-            var anchor = this.children.find(function (item) { return item.data.index === _this.data.indexList[index]; });
-            if (!anchor || !safeAnchor)
+                : childrenIndex;
+            var safeAnchor = this.children[safeIndex];
+            if (!safeAnchor) {
                 return;
+            }
             // 如果当前有正在进行的滚动，将新的滚动任务加入队列
             if (!this.pendingAnchor) {
                 this.pendingAnchor = [];
@@ -365,18 +382,15 @@ var indexList = function () {
                 return;
             }
             this.pendingAnchor = [anchor];
-            this.scrollToAnchorIndex = index;
-            this.setData({
-                currentMoveIconText: anchor.data.index,
-            });
+            this.scrollToAnchorIndexData = indexData;
             safeAnchor
                 .scrollIntoView(this.scrollTop)
                 .then(function () {
-                _this.onScroll(safeIndex);
+                _this.onScroll(safeAnchor.data.index);
                 if (_this.pendingAnchor.length > 0 && _this.pendingAnchor[0] !== anchor) {
-                    var index_1 = _this.data.indexList.indexOf(_this.pendingAnchor[0].data.index);
+                    var dataIndex = _this.pendingAnchor[0].data.index;
                     _this.pendingAnchor = [];
-                    _this.scrollToAnchor(index_1);
+                    _this.scrollToAnchor(dataIndex);
                     return;
                 }
                 _this.pendingAnchor = [];
@@ -384,9 +398,9 @@ var indexList = function () {
                 .catch(function (err) {
                 console.error(err);
                 if (_this.pendingAnchor.length > 0 && _this.pendingAnchor[0] !== anchor) {
-                    var index_2 = _this.data.indexList.indexOf(_this.pendingAnchor[0].data.index);
+                    var dataIndex = _this.pendingAnchor[0].data.index;
                     _this.pendingAnchor = [];
-                    _this.scrollToAnchor(index_2);
+                    _this.scrollToAnchor(dataIndex);
                     return;
                 }
                 _this.pendingAnchor = [];

package/lib/index-bar/index.wxml

@@ -24,8 +24,9 @@
       wx:for="{{ indexList }}"
       wx:key="index"
       class="smart-index-bar__index"
-      style="z-index: {{ zIndex + 1 }};color: {{ activeAnchorIndex === index ? highlightColor : '' }};font-size: {{ sidebarFontSize }};line-height: {{ sidebarLineHeight }};"
+      style="z-index: {{ zIndex + 1 }};color: {{ activeAnchorIndexData === item ? highlightColor : '' }};font-size: {{ sidebarFontSize }};line-height: {{ sidebarLineHeight }};"
       data-index="{{ index }}"
+      data-item="{{ item }}"
     >
       {{ item }}
     </view>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-miniapp/smart-ui",
-  "version": "2.12.0-beta-6",
+  "version": "2.12.0",
   "author": "MiniApp Team",
   "license": "MIT",
   "miniprogram": "lib",