@tuya-miniapp/smart-ui 2.11.2-beta-4 → 2.12.0-beta-0

package/dist/index-anchor/index.js

@@ -24,6 +24,11 @@ SmartComponent({
                                 resolve('success');
                             }, 50);
                         },
+                        fail: err => {
+                            setTimeout(() => {
+                                reject(err);
+                            }, 50);
+                        },
                     });
                 });
             });

package/dist/index-bar/icon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill%3D%22none%22%20version%3D%221.1%22%20width%3D%2252%22%20height%3D%2244%22%20viewBox%3D%220%200%2052%2044%22%3E%3Cg%3E%3Cpath%20d%3D%22M50.967297%2C23.260168Q33.797146%2C44%2C22%2C44C9.8497353%2C44%2C0%2C34.150265%2C0%2C22C0%2C9.8497353%2C9.8497353%2C0%2C22%2C0Q33.797146%2C0%2C50.967297%2C20.739832C51.570396%2C21.468315%2C51.570396%2C22.531685%2C50.967297%2C23.260168%22%20fill%3D%22currentColor%22%20fill-opacity%3D%220.30000001192092896%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+export default _default;

package/dist/index-bar/icon.js

@@ -0,0 +1 @@
+export default 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill%3D%22none%22%20version%3D%221.1%22%20width%3D%2252%22%20height%3D%2244%22%20viewBox%3D%220%200%2052%2044%22%3E%3Cg%3E%3Cpath%20d%3D%22M50.967297%2C23.260168Q33.797146%2C44%2C22%2C44C9.8497353%2C44%2C0%2C34.150265%2C0%2C22C0%2C9.8497353%2C9.8497353%2C0%2C22%2C0Q33.797146%2C0%2C50.967297%2C20.739832C51.570396%2C21.468315%2C51.570396%2C22.531685%2C50.967297%2C23.260168%22%20fill%3D%22currentColor%22%20fill-opacity%3D%220.30000001192092896%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E';

package/dist/index-bar/index.css

@@ -1 +1 @@
-@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000}.smart-manrope{font-family:Manrope,sans-serif}.smart-index-bar{position:relative}.smart-index-bar__sidebar{display:flex;flex-direction:column;position:fixed;right:0;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none}.smart-index-bar__index{font-size:var(--index-bar-index-font-size,10px);font-weight:500;line-height:var(--index-bar-index-line-height,14px);padding:0 var(--padding-base,4px) 0 var(--padding-md,16px)}
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000}.smart-manrope{font-family:Manrope,sans-serif}.smart-index-bar{position:relative}.smart-index-bar__sidebar{display:flex;flex-direction:column;position:fixed;right:0;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none}.smart-index-bar__move-tip{line-height:0;opacity:0;pointer-events:none;position:absolute;right:100%;transform:translateY(-50%);transition:opacity .2s ease;white-space:nowrap}.smart-index-bar__move-tip--visible{opacity:1}.smart-index-bar__move-tip-inner{position:relative}.smart-index-bar__move-tip-text{color:var(--index-bar-move-tip-text-color,#fff);font-size:var(--index-bar-move-tip-text-font-size,24px);font-weight:700;left:50%;line-height:var(--index-bar-move-tip-text-line-height,32px);padding:var(--index-bar-move-tip-text-padding,0 10px 0 0);position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.smart-index-bar__index{font-size:var(--index-bar-index-font-size,10px);font-weight:500;line-height:var(--index-bar-index-line-height,16px);padding:var(--index-anchor-index-padding,0 4px 0 20px)}

package/dist/index-bar/index.js

@@ -3,6 +3,7 @@ import { SmartComponent } from '../common/component';
 import { useChildren } from '../common/relation';
 import { getRect, isDef } from '../common/utils';
 import { pageScrollMixin } from '../mixins/page-scroll';
+import iconSvg from './icon';
 import ty from '../common/ty';
 const indexList = () => {
     const indexList = [];
@@ -47,6 +48,10 @@ SmartComponent({
             type: Array,
             value: indexList(),
         },
+        showMoveTip: {
+            type: Boolean,
+            value: false,
+        },
     },
     mixins: [
         pageScrollMixin(function (event) {
@@ -55,15 +60,27 @@ SmartComponent({
         }),
     ],
     data: {
+        iconSvg,
         activeAnchorIndex: null,
         showSidebar: false,
+        showMoveIcon: false,
+        lowestActiveIndex: -1,
+        currentMoveIconText: '',
+        moveTipTop: 0,
     },
     // @ts-ignore
     pendingAnchor: null,
+    // 用于过滤 clientY 偶现跳变：保留最近 3 次有效值，与其中至少 2 个都超阈值才判定本帧为异常
+    lastValidOffsetYHistory: null,
+    preMoveTipTop: null,
     watch: {
-        activeAnchorIndex(newVal) {
-            if (newVal !== null && newVal !== -1) {
+        moveTipTop(newVal) {
+            if (this.preMoveTipTop === null) {
+                this.preMoveTipTop = newVal;
+            }
+            if (newVal !== null && newVal !== 0 && newVal !== this.preMoveTipTop) {
                 ty.vibrateShort({ type: 'light' });
+                this.preMoveTipTop = newVal;
             }
         },
     },
@@ -72,6 +89,10 @@ SmartComponent({
     },
     methods: {
         updateData() {
+            // 列表更新时重置记录的最低滚动节点
+            this.setData({
+                lowestActiveIndex: -1,
+            });
             wx.nextTick(() => {
                 if (this.timer != null) {
                     clearTimeout(this.timer);
@@ -81,13 +102,19 @@ SmartComponent({
                         showSidebar: !!this.children.length,
                     });
                     this.setRect().then(() => {
+                        this.computeLowestActiveIndex();
                         this.onScroll();
                     });
                 }, 0);
             });
         },
         setRect() {
-            return Promise.all([this.setAnchorsRect(), this.setListRect(), this.setSidebarRect()]);
+            return Promise.all([
+                this.setAnchorsRect(),
+                this.setListRect(),
+                this.setSidebarRect(),
+                this.getPageHeight(),
+            ]);
         },
         setAnchorsRect() {
             return Promise.all(this.children.map(anchor => getRect(anchor, '.smart-index-anchor-wrapper').then(rect => {
@@ -97,6 +124,18 @@ SmartComponent({
                 });
             })));
         },
+        getPageHeight() {
+            return new Promise(resolve => {
+                const query = wx.createSelectorQuery();
+                query.selectViewport().scrollOffset(); // 也可以使用 .boundingClientRect()
+                query.exec(res => {
+                    resolve(res[0].scrollHeight);
+                    Object.assign(this, {
+                        pageHeight: res[0].scrollHeight,
+                    });
+                });
+            });
+        },
         setListRect() {
             return getRect(this, '.smart-index-bar').then(rect => {
                 if (!isDef(rect)) {
@@ -119,6 +158,34 @@ SmartComponent({
                 };
             });
         },
+        /**
+         * 用视口高度与内容高度几何计算「能滚动到吸顶位置」的最底部锚点索引，
+         * 用于 scrollToAnchor 时限制目标索引，避免点击无法滚到顶的锚点。
+         */
+        computeLowestActiveIndex() {
+            const { children } = this;
+            if (!children || children.length === 0) {
+                this.setData({ lowestActiveIndex: -1 });
+                return;
+            }
+            const { stickyOffsetTop } = this.data;
+            // 页面滚动内容总高度 = 最后一个锚点的 top + height（与 setAnchorsRect 中存的一致：文档坐标）
+            const contentHeight = this.pageHeight;
+            const sysInfo = wx.getSystemInfoSync && wx.getSystemInfoSync();
+            // @ts-ignore
+            const viewportHeight = (sysInfo && sysInfo.useableWindowHeight) || sysInfo.windowHeight;
+            const maxScrollTop = Math.max(0, contentHeight - viewportHeight);
+            // 锚点 i 能滚到吸顶 ⟺ 所需 scrollTop = anchor[i].top - stickyOffsetTop ≤ maxScrollTop
+            // 即 anchor[i].top ≤ maxScrollTop + stickyOffsetTop；从后往前取第一个满足的 i
+            let lowest = -1;
+            for (let i = children.length - 1; i >= 0; i--) {
+                if (children[i].top <= maxScrollTop + stickyOffsetTop) {
+                    lowest = i;
+                    break;
+                }
+            }
+            this.setData({ lowestActiveIndex: lowest });
+        },
         setDiffData({ target, data }) {
             const diffData = {};
             Object.keys(data).forEach(key => {
@@ -148,13 +215,22 @@ SmartComponent({
             }
             return -1;
         },
-        onScroll() {
+        onScroll(controlActiveIndex) {
             const { children = [], scrollTop } = this;
             if (!children.length) {
                 return;
             }
+            const hasIndex = controlActiveIndex !== undefined;
+            const currScrollGetIndex = this.getActiveAnchorIndex();
+            // 程序化滚动（如 sidebar 点击）未完成时，不根据当前 scrollTop 更新 UI，
+            // 避免 scrollTop 已变而 anchor 几何未重测导致 getActiveAnchorIndex 算错引发闪动。
+            // 滚动结束后在 scrollToAnchor 的 then 里会 setRect + onScroll 做一次正确更新。
+            if (this.pendingAnchor && this.pendingAnchor.length > 0 && !hasIndex) {
+                return;
+            }
+            // lowestActiveIndex 已改为在 setRect 后由 computeLowestActiveIndex() 几何计算，此处不再根据滚动推断
             const { sticky, stickyOffsetTop, zIndex, highlightColor } = this.data;
-            const active = this.getActiveAnchorIndex();
+            const active = hasIndex ? controlActiveIndex : currScrollGetIndex;
             this.setDiffData({
                 target: this,
                 data: {
@@ -167,6 +243,7 @@ SmartComponent({
                     isActiveAnchorSticky = children[active].top <= stickyOffsetTop + scrollTop;
                 }
                 children.forEach((item, index) => {
+                    // 为当前的 anchor 设置 fixed 吸顶和文字颜色
                     if (index === active) {
                         let wrapperStyle = '';
                         let anchorStyle = `
@@ -191,8 +268,9 @@ SmartComponent({
                                 wrapperStyle,
                             },
                         });
+                        // 滚动模式时 上一个tab 要有种慢慢被滚动切换的效果
                     }
-                    else if (index === active - 1) {
+                    else if (index === active - 1 && !hasIndex) {
                         const currentAnchor = children[index];
                         const currentOffsetTop = currentAnchor.top;
                         const targetOffsetTop = index === children.length - 1 ? this.top : children[index + 1].top;
@@ -213,6 +291,7 @@ SmartComponent({
                         });
                     }
                     else {
+                        // 其他恢复原样
                         this.setDiffData({
                             target: item,
                             data: {
@@ -226,6 +305,7 @@ SmartComponent({
             }
         },
         onClick(event) {
+            ty.vibrateShort({ type: 'light' });
             this.scrollToAnchor(event.target.dataset.index);
         },
         onTouchMove(event) {
@@ -233,32 +313,47 @@ SmartComponent({
                 return;
             const sidebarLength = this.children.length;
             const touch = event.touches[0];
-            const itemHeight = this.sidebar.height / sidebarLength;
-            let index = Math.floor((touch.clientY - this.sidebar.top) / itemHeight);
-            // 有时候会莫名间断出现 -90多的情况
-            if (index < -20) {
-                return;
-            }
-            if (index < 0) {
-                index = 0;
+            let offsetY = touch.clientY - this.sidebar.top;
+            const threshold = this.sidebar.height * 0.25;
+            if (!this.lastValidOffsetYHistory) {
+                this.lastValidOffsetYHistory = [];
             }
-            else if (index > sidebarLength - 1) {
-                index = sidebarLength - 1;
+            const nearCount = this.lastValidOffsetYHistory.filter(h => Math.abs(offsetY - h) < threshold).length;
+            // 与最近 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);
+            this.setData({
+                showMoveIcon: true,
+                moveTipTop: index * itemHeight + itemHeight / 2,
+            });
             this.scrollToAnchor(index);
         },
         onTouchStop() {
             if (!this.data.scrollable)
                 return;
+            this.setData({
+                showMoveIcon: false,
+            });
             this.scrollToAnchorIndex = null;
+            this.lastValidOffsetYHistory = [];
         },
         scrollToAnchor(index) {
             if (typeof index !== 'number' || this.scrollToAnchorIndex === index) {
                 return;
             }
-            this.scrollToAnchorIndex = index;
+            const safeIndex = this.data.lowestActiveIndex !== -1 && index > 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)
+            if (!anchor || !safeAnchor)
                 return;
             // 如果当前有正在进行的滚动，将新的滚动任务加入队列
             if (!this.pendingAnchor) {
@@ -269,13 +364,18 @@ SmartComponent({
                 return;
             }
             this.pendingAnchor = [anchor];
-            anchor
+            this.scrollToAnchorIndex = index;
+            this.setData({
+                currentMoveIconText: anchor.data.index,
+            });
+            safeAnchor
                 .scrollIntoView(this.scrollTop)
                 .then(() => {
+                this.onScroll(safeIndex);
                 if (this.pendingAnchor.length > 0 && this.pendingAnchor[0] !== anchor) {
                     const index = this.data.indexList.indexOf(this.pendingAnchor[0].data.index);
-                    this.scrollToAnchor(index);
                     this.pendingAnchor = [];
+                    this.scrollToAnchor(index);
                     return;
                 }
                 this.pendingAnchor = [];
@@ -284,8 +384,8 @@ SmartComponent({
                 console.error(err);
                 if (this.pendingAnchor.length > 0 && this.pendingAnchor[0] !== anchor) {
                     const index = this.data.indexList.indexOf(this.pendingAnchor[0].data.index);
-                    this.scrollToAnchor(index);
                     this.pendingAnchor = [];
+                    this.scrollToAnchor(index);
                     return;
                 }
                 this.pendingAnchor = [];

package/dist/index-bar/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index"
+  }
 }

package/dist/index-bar/index.wxml

@@ -9,6 +9,17 @@
     catch:touchend="onTouchStop"
     catch:touchcancel="onTouchStop"
   >
+  <view
+    wx:if="{{ showMoveTip }}"
+    class="smart-index-bar__move-tip {{ showMoveIcon ? 'smart-index-bar__move-tip--visible' : '' }}"
+    style="top: {{ moveTipTop }}px;"
+  >
+    <view class="smart-index-bar__move-tip-inner">
+      <slot name="move-tip" />
+      <smart-icon name="{{iconSvg}}" size="44px" customStyle="width: 1.18em;" />
+      <text class="smart-index-bar__move-tip-text">{{ currentMoveIconText }}</text>
+    </view>
+  </view>
     <view
       wx:for="{{ indexList }}"
       wx:key="index"

package/dist/index-bar/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000}.smart-manrope{font-family:Manrope,sans-serif}.smart-index-bar{position:relative}.smart-index-bar__sidebar{display:flex;flex-direction:column;position:fixed;right:0;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none}.smart-index-bar__index{font-size:var(--index-bar-index-font-size,10px);font-weight:500;line-height:var(--index-bar-index-line-height,14px);padding:0 var(--padding-base,4px) 0 var(--padding-md,16px)}
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000}.smart-manrope{font-family:Manrope,sans-serif}.smart-index-bar{position:relative}.smart-index-bar__sidebar{display:flex;flex-direction:column;position:fixed;right:0;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none}.smart-index-bar__move-tip{line-height:0;opacity:0;pointer-events:none;position:absolute;right:100%;transform:translateY(-50%);transition:opacity .2s ease;white-space:nowrap}.smart-index-bar__move-tip--visible{opacity:1}.smart-index-bar__move-tip-inner{position:relative}.smart-index-bar__move-tip-text{color:var(--index-bar-move-tip-text-color,#fff);font-size:var(--index-bar-move-tip-text-font-size,24px);font-weight:700;left:50%;line-height:var(--index-bar-move-tip-text-line-height,32px);padding:var(--index-bar-move-tip-text-padding,0 10px 0 0);position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.smart-index-bar__index{font-size:var(--index-bar-index-font-size,10px);font-weight:500;line-height:var(--index-bar-index-line-height,16px);padding:var(--index-anchor-index-padding,0 4px 0 20px)}

package/lib/index-anchor/index.js

@@ -27,6 +27,11 @@ var relation_1 = require("../common/relation");
                                 resolve('success');
                             }, 50);
                         },
+                        fail: function (err) {
+                            setTimeout(function () {
+                                reject(err);
+                            }, 50);
+                        },
                     });
                 });
             });

package/lib/index-bar/icon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill%3D%22none%22%20version%3D%221.1%22%20width%3D%2252%22%20height%3D%2244%22%20viewBox%3D%220%200%2052%2044%22%3E%3Cg%3E%3Cpath%20d%3D%22M50.967297%2C23.260168Q33.797146%2C44%2C22%2C44C9.8497353%2C44%2C0%2C34.150265%2C0%2C22C0%2C9.8497353%2C9.8497353%2C0%2C22%2C0Q33.797146%2C0%2C50.967297%2C20.739832C51.570396%2C21.468315%2C51.570396%2C22.531685%2C50.967297%2C23.260168%22%20fill%3D%22currentColor%22%20fill-opacity%3D%220.30000001192092896%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+export default _default;

package/lib/index-bar/icon.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill%3D%22none%22%20version%3D%221.1%22%20width%3D%2252%22%20height%3D%2244%22%20viewBox%3D%220%200%2052%2044%22%3E%3Cg%3E%3Cpath%20d%3D%22M50.967297%2C23.260168Q33.797146%2C44%2C22%2C44C9.8497353%2C44%2C0%2C34.150265%2C0%2C22C0%2C9.8497353%2C9.8497353%2C0%2C22%2C0Q33.797146%2C0%2C50.967297%2C20.739832C51.570396%2C21.468315%2C51.570396%2C22.531685%2C50.967297%2C23.260168%22%20fill%3D%22currentColor%22%20fill-opacity%3D%220.30000001192092896%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E';

package/lib/index-bar/index.css

@@ -1 +1 @@
-@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000}.smart-manrope{font-family:Manrope,sans-serif}.smart-index-bar{position:relative}.smart-index-bar__sidebar{display:flex;flex-direction:column;position:fixed;right:0;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none}.smart-index-bar__index{font-size:var(--index-bar-index-font-size,10px);font-weight:500;line-height:var(--index-bar-index-line-height,14px);padding:0 var(--padding-base,4px) 0 var(--padding-md,16px)}
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000}.smart-manrope{font-family:Manrope,sans-serif}.smart-index-bar{position:relative}.smart-index-bar__sidebar{display:flex;flex-direction:column;position:fixed;right:0;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none}.smart-index-bar__move-tip{line-height:0;opacity:0;pointer-events:none;position:absolute;right:100%;transform:translateY(-50%);transition:opacity .2s ease;white-space:nowrap}.smart-index-bar__move-tip--visible{opacity:1}.smart-index-bar__move-tip-inner{position:relative}.smart-index-bar__move-tip-text{color:var(--index-bar-move-tip-text-color,#fff);font-size:var(--index-bar-move-tip-text-font-size,24px);font-weight:700;left:50%;line-height:var(--index-bar-move-tip-text-line-height,32px);padding:var(--index-bar-move-tip-text-padding,0 10px 0 0);position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.smart-index-bar__index{font-size:var(--index-bar-index-font-size,10px);font-weight:500;line-height:var(--index-bar-index-line-height,16px);padding:var(--index-anchor-index-padding,0 4px 0 20px)}

package/lib/index-bar/index.js

@@ -8,6 +8,7 @@ var component_1 = require("../common/component");
 var relation_1 = require("../common/relation");
 var utils_1 = require("../common/utils");
 var page_scroll_1 = require("../mixins/page-scroll");
+var icon_1 = __importDefault(require("./icon"));
 var ty_1 = __importDefault(require("../common/ty"));
 var indexList = function () {
     var indexList = [];
@@ -52,6 +53,10 @@ var indexList = function () {
             type: Array,
             value: indexList(),
         },
+        showMoveTip: {
+            type: Boolean,
+            value: false,
+        },
     },
     mixins: [
         (0, page_scroll_1.pageScrollMixin)(function (event) {
@@ -60,15 +65,27 @@ var indexList = function () {
         }),
     ],
     data: {
+        iconSvg: icon_1.default,
         activeAnchorIndex: null,
         showSidebar: false,
+        showMoveIcon: false,
+        lowestActiveIndex: -1,
+        currentMoveIconText: '',
+        moveTipTop: 0,
     },
     // @ts-ignore
     pendingAnchor: null,
+    // 用于过滤 clientY 偶现跳变：保留最近 3 次有效值，与其中至少 2 个都超阈值才判定本帧为异常
+    lastValidOffsetYHistory: null,
+    preMoveTipTop: null,
     watch: {
-        activeAnchorIndex: function (newVal) {
-            if (newVal !== null && newVal !== -1) {
+        moveTipTop: function (newVal) {
+            if (this.preMoveTipTop === null) {
+                this.preMoveTipTop = newVal;
+            }
+            if (newVal !== null && newVal !== 0 && newVal !== this.preMoveTipTop) {
                 ty_1.default.vibrateShort({ type: 'light' });
+                this.preMoveTipTop = newVal;
             }
         },
     },
@@ -78,6 +95,10 @@ var indexList = function () {
     methods: {
         updateData: function () {
             var _this = this;
+            // 列表更新时重置记录的最低滚动节点
+            this.setData({
+                lowestActiveIndex: -1,
+            });
             wx.nextTick(function () {
                 if (_this.timer != null) {
                     clearTimeout(_this.timer);
@@ -87,13 +108,19 @@ var indexList = function () {
                         showSidebar: !!_this.children.length,
                     });
                     _this.setRect().then(function () {
+                        _this.computeLowestActiveIndex();
                         _this.onScroll();
                     });
                 }, 0);
             });
         },
         setRect: function () {
-            return Promise.all([this.setAnchorsRect(), this.setListRect(), this.setSidebarRect()]);
+            return Promise.all([
+                this.setAnchorsRect(),
+                this.setListRect(),
+                this.setSidebarRect(),
+                this.getPageHeight(),
+            ]);
         },
         setAnchorsRect: function () {
             var _this = this;
@@ -106,6 +133,19 @@ var indexList = function () {
                 });
             }));
         },
+        getPageHeight: function () {
+            var _this = this;
+            return new Promise(function (resolve) {
+                var query = wx.createSelectorQuery();
+                query.selectViewport().scrollOffset(); // 也可以使用 .boundingClientRect()
+                query.exec(function (res) {
+                    resolve(res[0].scrollHeight);
+                    Object.assign(_this, {
+                        pageHeight: res[0].scrollHeight,
+                    });
+                });
+            });
+        },
         setListRect: function () {
             var _this = this;
             return (0, utils_1.getRect)(this, '.smart-index-bar').then(function (rect) {
@@ -130,6 +170,34 @@ var indexList = function () {
                 };
             });
         },
+        /**
+         * 用视口高度与内容高度几何计算「能滚动到吸顶位置」的最底部锚点索引，
+         * 用于 scrollToAnchor 时限制目标索引，避免点击无法滚到顶的锚点。
+         */
+        computeLowestActiveIndex: function () {
+            var children = this.children;
+            if (!children || children.length === 0) {
+                this.setData({ lowestActiveIndex: -1 });
+                return;
+            }
+            var stickyOffsetTop = this.data.stickyOffsetTop;
+            // 页面滚动内容总高度 = 最后一个锚点的 top + height（与 setAnchorsRect 中存的一致：文档坐标）
+            var contentHeight = this.pageHeight;
+            var sysInfo = wx.getSystemInfoSync && wx.getSystemInfoSync();
+            // @ts-ignore
+            var viewportHeight = (sysInfo && sysInfo.useableWindowHeight) || sysInfo.windowHeight;
+            var maxScrollTop = Math.max(0, contentHeight - viewportHeight);
+            // 锚点 i 能滚到吸顶 ⟺ 所需 scrollTop = anchor[i].top - stickyOffsetTop ≤ maxScrollTop
+            // 即 anchor[i].top ≤ maxScrollTop + stickyOffsetTop；从后往前取第一个满足的 i
+            var lowest = -1;
+            for (var i = children.length - 1; i >= 0; i--) {
+                if (children[i].top <= maxScrollTop + stickyOffsetTop) {
+                    lowest = i;
+                    break;
+                }
+            }
+            this.setData({ lowestActiveIndex: lowest });
+        },
         setDiffData: function (_a) {
             var target = _a.target, data = _a.data;
             var diffData = {};
@@ -160,14 +228,23 @@ var indexList = function () {
             }
             return -1;
         },
-        onScroll: function () {
+        onScroll: function (controlActiveIndex) {
             var _this = this;
             var _a = this, _b = _a.children, children = _b === void 0 ? [] : _b, scrollTop = _a.scrollTop;
             if (!children.length) {
                 return;
             }
+            var hasIndex = controlActiveIndex !== undefined;
+            var currScrollGetIndex = this.getActiveAnchorIndex();
+            // 程序化滚动（如 sidebar 点击）未完成时，不根据当前 scrollTop 更新 UI，
+            // 避免 scrollTop 已变而 anchor 几何未重测导致 getActiveAnchorIndex 算错引发闪动。
+            // 滚动结束后在 scrollToAnchor 的 then 里会 setRect + onScroll 做一次正确更新。
+            if (this.pendingAnchor && this.pendingAnchor.length > 0 && !hasIndex) {
+                return;
+            }
+            // lowestActiveIndex 已改为在 setRect 后由 computeLowestActiveIndex() 几何计算，此处不再根据滚动推断
             var _c = this.data, sticky = _c.sticky, stickyOffsetTop = _c.stickyOffsetTop, zIndex = _c.zIndex, highlightColor = _c.highlightColor;
-            var active = this.getActiveAnchorIndex();
+            var active = hasIndex ? controlActiveIndex : currScrollGetIndex;
             this.setDiffData({
                 target: this,
                 data: {
@@ -180,6 +257,7 @@ var indexList = function () {
                     isActiveAnchorSticky_1 = children[active].top <= stickyOffsetTop + scrollTop;
                 }
                 children.forEach(function (item, index) {
+                    // 为当前的 anchor 设置 fixed 吸顶和文字颜色
                     if (index === active) {
                         var wrapperStyle = '';
                         var anchorStyle = "\n              color: ".concat(highlightColor, ";\n            ");
@@ -195,8 +273,9 @@ var indexList = function () {
                                 wrapperStyle: wrapperStyle,
                             },
                         });
+                        // 滚动模式时 上一个tab 要有种慢慢被滚动切换的效果
                     }
-                    else if (index === active - 1) {
+                    else if (index === active - 1 && !hasIndex) {
                         var currentAnchor = children[index];
                         var currentOffsetTop = currentAnchor.top;
                         var targetOffsetTop = index === children.length - 1 ? _this.top : children[index + 1].top;
@@ -212,6 +291,7 @@ var indexList = function () {
                         });
                     }
                     else {
+                        // 其他恢复原样
                         _this.setDiffData({
                             target: item,
                             data: {
@@ -225,6 +305,7 @@ var indexList = function () {
             }
         },
         onClick: function (event) {
+            ty_1.default.vibrateShort({ type: 'light' });
             this.scrollToAnchor(event.target.dataset.index);
         },
         onTouchMove: function (event) {
@@ -232,33 +313,48 @@ var indexList = function () {
                 return;
             var sidebarLength = this.children.length;
             var touch = event.touches[0];
-            var itemHeight = this.sidebar.height / sidebarLength;
-            var index = Math.floor((touch.clientY - this.sidebar.top) / itemHeight);
-            // 有时候会莫名间断出现 -90多的情况
-            if (index < -20) {
-                return;
-            }
-            if (index < 0) {
-                index = 0;
+            var offsetY = touch.clientY - this.sidebar.top;
+            var threshold = this.sidebar.height * 0.25;
+            if (!this.lastValidOffsetYHistory) {
+                this.lastValidOffsetYHistory = [];
             }
-            else if (index > sidebarLength - 1) {
-                index = sidebarLength - 1;
+            var nearCount = this.lastValidOffsetYHistory.filter(function (h) { return Math.abs(offsetY - h) < threshold; }).length;
+            // 与最近 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);
+            this.setData({
+                showMoveIcon: true,
+                moveTipTop: index * itemHeight + itemHeight / 2,
+            });
             this.scrollToAnchor(index);
         },
         onTouchStop: function () {
             if (!this.data.scrollable)
                 return;
+            this.setData({
+                showMoveIcon: false,
+            });
             this.scrollToAnchorIndex = null;
+            this.lastValidOffsetYHistory = [];
         },
         scrollToAnchor: function (index) {
             var _this = this;
             if (typeof index !== 'number' || this.scrollToAnchorIndex === index) {
                 return;
             }
-            this.scrollToAnchorIndex = index;
+            var safeIndex = this.data.lowestActiveIndex !== -1 && index > 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)
+            if (!anchor || !safeAnchor)
                 return;
             // 如果当前有正在进行的滚动，将新的滚动任务加入队列
             if (!this.pendingAnchor) {
@@ -269,13 +365,18 @@ var indexList = function () {
                 return;
             }
             this.pendingAnchor = [anchor];
-            anchor
+            this.scrollToAnchorIndex = index;
+            this.setData({
+                currentMoveIconText: anchor.data.index,
+            });
+            safeAnchor
                 .scrollIntoView(this.scrollTop)
                 .then(function () {
+                _this.onScroll(safeIndex);
                 if (_this.pendingAnchor.length > 0 && _this.pendingAnchor[0] !== anchor) {
                     var index_1 = _this.data.indexList.indexOf(_this.pendingAnchor[0].data.index);
-                    _this.scrollToAnchor(index_1);
                     _this.pendingAnchor = [];
+                    _this.scrollToAnchor(index_1);
                     return;
                 }
                 _this.pendingAnchor = [];
@@ -284,8 +385,8 @@ var indexList = function () {
                 console.error(err);
                 if (_this.pendingAnchor.length > 0 && _this.pendingAnchor[0] !== anchor) {
                     var index_2 = _this.data.indexList.indexOf(_this.pendingAnchor[0].data.index);
-                    _this.scrollToAnchor(index_2);
                     _this.pendingAnchor = [];
+                    _this.scrollToAnchor(index_2);
                     return;
                 }
                 _this.pendingAnchor = [];

package/lib/index-bar/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index"
+  }
 }

package/lib/index-bar/index.wxml

@@ -9,6 +9,17 @@
     catch:touchend="onTouchStop"
     catch:touchcancel="onTouchStop"
   >
+  <view
+    wx:if="{{ showMoveTip }}"
+    class="smart-index-bar__move-tip {{ showMoveIcon ? 'smart-index-bar__move-tip--visible' : '' }}"
+    style="top: {{ moveTipTop }}px;"
+  >
+    <view class="smart-index-bar__move-tip-inner">
+      <slot name="move-tip" />
+      <smart-icon name="{{iconSvg}}" size="44px" customStyle="width: 1.18em;" />
+      <text class="smart-index-bar__move-tip-text">{{ currentMoveIconText }}</text>
+    </view>
+  </view>
     <view
       wx:for="{{ indexList }}"
       wx:key="index"

package/lib/index-bar/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000}.smart-manrope{font-family:Manrope,sans-serif}.smart-index-bar{position:relative}.smart-index-bar__sidebar{display:flex;flex-direction:column;position:fixed;right:0;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none}.smart-index-bar__index{font-size:var(--index-bar-index-font-size,10px);font-weight:500;line-height:var(--index-bar-index-line-height,14px);padding:0 var(--padding-base,4px) 0 var(--padding-md,16px)}
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000}.smart-manrope{font-family:Manrope,sans-serif}.smart-index-bar{position:relative}.smart-index-bar__sidebar{display:flex;flex-direction:column;position:fixed;right:0;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none}.smart-index-bar__move-tip{line-height:0;opacity:0;pointer-events:none;position:absolute;right:100%;transform:translateY(-50%);transition:opacity .2s ease;white-space:nowrap}.smart-index-bar__move-tip--visible{opacity:1}.smart-index-bar__move-tip-inner{position:relative}.smart-index-bar__move-tip-text{color:var(--index-bar-move-tip-text-color,#fff);font-size:var(--index-bar-move-tip-text-font-size,24px);font-weight:700;left:50%;line-height:var(--index-bar-move-tip-text-line-height,32px);padding:var(--index-bar-move-tip-text-padding,0 10px 0 0);position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.smart-index-bar__index{font-size:var(--index-bar-index-font-size,10px);font-weight:500;line-height:var(--index-bar-index-line-height,16px);padding:var(--index-anchor-index-padding,0 4px 0 20px)}

package/package.json

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