@tuya-miniapp/smart-ui 2.6.4-beta-8 → 2.6.4-beta-9

package/lib/picker-column/index.js

@@ -1,13 +1,4 @@
 "use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -16,6 +7,7 @@ var component_1 = require("../common/component");
 var utils_1 = require("../common/utils");
 var validator_1 = require("../common/validator");
 var ty_1 = __importDefault(require("../common/ty"));
+var DEFAULT_DURATION = 400;
 var compIdList = [];
 var getId = function () {
     var id = 'smart-picker-column-' + compIdList.length;
@@ -40,8 +32,8 @@ var getId = function () {
             observer: function (value) {
                 if (!this.data.isInit)
                     return;
-                this.updateViewOptions();
                 this.updateUint(value);
+                this.checkIndexUpdateList();
             },
         },
         defaultIndex: {
@@ -50,19 +42,18 @@ var getId = function () {
         },
         changeAnimation: {
             type: Boolean,
-            value: true,
+            value: false,
         },
         fontStyle: {
             type: String,
             value: '',
         },
         activeIndex: {
-            type: Number,
-            value: -1,
+            type: null,
             observer: function () {
                 if (!this.data.isInit)
                     return;
-                this.updateViewOptions();
+                this.checkIndexUpdateList();
             },
         },
         unit: {
@@ -79,83 +70,75 @@ var getId = function () {
         },
     },
     data: {
-        startY: 0,
-        offset: 0,
-        duration: 0,
-        startOffset: 0,
-        optionsV: [],
-        currentIndex: -1,
-        renderNum: 0,
-        renderStart: 0,
-        animate: false,
-        playing: false,
         isInit: false,
         maxText: '',
-        instanceId: '',
-        timer: null,
-        preOffsetList: [],
-        viewOptions: [],
+        optionsVIndexList: [],
+        offsetActiveIndex: 0,
+        endTimer: null,
+        offsetList: [],
+        moving: false,
+        movingDirection: 'down',
+        startY: 0,
+        offsetting: 0,
+        animationIndex: 0,
+        isDestroy: false,
     },
     created: function () {
         this.setData({
             instanceId: getId(),
         });
-        this.checkIndex();
-        this.updateViewOptions();
-        var options = this.data.options;
-        this.updateUint(options);
+        this.updateUint(this.data.options);
+        this.checkIndexUpdateList();
         this.setData({
             isInit: true,
         });
     },
+    destroyed: function () {
+        this.setData({
+            isDestroy: true,
+        });
+    },
     methods: {
-        checkIndex: function () {
-            var activeIndex = this.data.activeIndex;
-            var index = this.adjustIndex(activeIndex);
-            if (activeIndex === index)
-                return;
+        checkIndexUpdateList: function () {
+            var _a = this.data, activeIndex = _a.activeIndex, defaultIndex = _a.defaultIndex;
+            var count = this.data.options.length;
+            var currIndex = activeIndex !== null ? activeIndex : defaultIndex;
+            var animationIndex = this.getAnimationIndex(currIndex);
+            animationIndex = this.adjustIndex(animationIndex);
+            var currActiveIndex = this.data.loop ? ((animationIndex + 1) % count) - 1 : animationIndex;
+            if (currActiveIndex < 0) {
+                currActiveIndex += count;
+            }
+            var optionsVIndexList = this.getVisibleOptions(animationIndex);
             this.setData({
-                activeIndex: index,
+                activeIndex: currActiveIndex,
+                animationIndex: animationIndex,
+                optionsVIndexList: optionsVIndexList,
             });
+            // if (currActiveIndex !== activeIndex) {
+            //   this.$emit('change', currActiveIndex);
+            // }
         },
-        adjustIndex: function (index) {
-            var data = this.data;
-            var count = this.data.options.length;
-            index = (0, utils_1.range)(index, 0, count);
-            for (var i = index; i < count; i++) {
-                if (!this.isDisabled(data.options[i]))
-                    return i;
-            }
-            for (var i = index - 1; i >= 0; i--) {
-                if (!this.isDisabled(data.options[i]))
-                    return i;
+        getAnimationIndex: function (activeIndex) {
+            var animationIndex = this.data.animationIndex;
+            var length = this.data.options.length || 1;
+            if (this.data.loop) {
+                var newAnimationIndex = this.getNewAnimationIndex(animationIndex, activeIndex, length, this.data.loop);
+                return newAnimationIndex;
             }
+            return activeIndex;
         },
-        isDisabled: function (option) {
-            return (0, validator_1.isObj)(option) && option.disabled;
-        },
-        updateViewOptions: function () {
-            var currActiveIndex = this.data.activeIndex < 0 ? 0 : this.data.activeIndex;
-            var partNum = Math.floor(currActiveIndex / 10);
-            var lastNum = this.data.activeIndex - partNum * 10;
-            if (lastNum < 5 && partNum > 0) {
-                partNum -= 1;
-            }
-            var part2Times = Math.floor(partNum / 2);
-            var part2Percent = partNum % 2;
-            var onePartOffset = part2Percent + part2Times;
-            var twoPartOffset = part2Times;
-            var isReverse = onePartOffset > twoPartOffset;
-            var startPart = twoPartOffset + onePartOffset;
-            var viewIndexList = !isReverse
-                ? (0, utils_1.generateRangeArray)(startPart * 10, startPart * 10 + 20)
-                : __spreadArray(__spreadArray([], (0, utils_1.generateRangeArray)(startPart * 10 + 10, startPart * 10 + 20), true), (0, utils_1.generateRangeArray)(startPart * 10, startPart * 10 + 10), true);
-            this.setData({
-                viewOptions: viewIndexList,
-            });
+        getCount: function () {
+            return this.data.options.length;
         },
         vibrateShort: function (count, time) {
-            var _this = this;
+            if (time === void 0) { time = DEFAULT_DURATION; }
+            if (this.data.vibrateTimer) {
+                clearInterval(this.data.vibrateTimer);
+                this.setData({
+                    vibrateTimer: null,
+                });
+            }
             if (!count) {
                 ty_1.default.vibrateShort({ type: 'light' });
                 return;
@@ -167,8 +150,11 @@ var getId = function () {
                     return;
                 }
                 has++;
-                _this.vibrateShort();
-            }, (time || this.data.animationTime) / count - 20);
+                ty_1.default.vibrateShort({ type: 'light' });
+            }, time / count - 20);
+            this.setData({
+                vibrateTimer: timer,
+            });
         },
         updateUint: function (options) {
             var _a = this.data, unit = _a.unit, valueKey = _a.valueKey;
@@ -184,6 +170,115 @@ var getId = function () {
                 this.setData({ maxText: maxText_1 });
             }
         },
+        getVisibleOptions: function (currentIndex) {
+            var animationIndex = Math.round(currentIndex !== undefined ? currentIndex : this.data.animationIndex);
+            var vOptionLength = this.data.visibleItemCount * 4 - 2;
+            var rotateAngle = 360 / vOptionLength;
+            var partCount = Math.floor(this.data.visibleItemCount / 2) + 3;
+            var newArr = new Array(vOptionLength).fill('');
+            var newValueArr = new Array(partCount * 2 + 1).fill('');
+            if (this.data.loop) {
+                // 循环模式：根据 options 首尾填充 newValueArr 数组
+                var optionsLength_1 = this.data.options.length;
+                if (optionsLength_1 === 0) {
+                    // 如果没有选项，填充空值
+                    newValueArr.fill('');
+                }
+                else {
+                    newValueArr.forEach(function (item, index) {
+                        // 计算相对于中心的偏移量
+                        var offset = index - partCount;
+                        // 计算目标索引，支持循环
+                        var targetAnimationIndex = animationIndex + offset;
+                        var targetIndex = ((targetAnimationIndex + 1) % optionsLength_1) - 1;
+                        if (targetIndex < 0) {
+                            targetIndex += optionsLength_1;
+                        }
+                        newValueArr[index] = targetIndex;
+                    });
+                }
+            }
+            else {
+                if (animationIndex < 0) {
+                    animationIndex = 0;
+                }
+                if (animationIndex > this.data.options.length - 1) {
+                    animationIndex = this.data.options.length - 1;
+                }
+                newValueArr.forEach(function (item, index) {
+                    var valueIndex = animationIndex - partCount + index >= 0
+                        ? animationIndex - partCount + index
+                        : undefined;
+                    if (valueIndex === undefined) {
+                        return;
+                    }
+                    newValueArr[index] = valueIndex;
+                });
+            }
+            var rotate = (animationIndex * rotateAngle) % 360;
+            if (rotate < 0) {
+                rotate += 360;
+            }
+            var rotateIndex = Math.round(rotate / rotateAngle);
+            // 环形结构填充：以rotateIndex为中心，向两边扩展填充newValueArr
+            var centerIndex = rotateIndex; // 中心位置
+            var halfLength = Math.floor(newValueArr.length / 2); // newValueArr的一半长度
+            // 从中心位置开始，向两边填充
+            for (var i = 0; i < newValueArr.length; i++) {
+                var targetIndex = (centerIndex - halfLength + i + vOptionLength) % vOptionLength; // 确保索引在0-17范围内
+                newArr[targetIndex] = newValueArr[i];
+            }
+            return newArr;
+        },
+        getNewAnimationIndex: function (animationIndex, activeIndex, length, loop) {
+            var curOptionsNewIndex = Math.floor((animationIndex + 1) / length) * length + activeIndex;
+            var preOptionsNewIndex = curOptionsNewIndex - length;
+            var afterOptionsNewIndex = curOptionsNewIndex + length;
+            var newAnimationIndex = !loop
+                ? activeIndex
+                : Math.abs(preOptionsNewIndex - animationIndex) >
+                    Math.abs(curOptionsNewIndex - animationIndex)
+                    ? Math.abs(curOptionsNewIndex - animationIndex) >
+                        Math.abs(afterOptionsNewIndex - animationIndex)
+                        ? afterOptionsNewIndex
+                        : curOptionsNewIndex
+                    : Math.abs(preOptionsNewIndex - animationIndex) >
+                        Math.abs(afterOptionsNewIndex - animationIndex)
+                        ? afterOptionsNewIndex
+                        : preOptionsNewIndex;
+            return newAnimationIndex;
+        },
+        adjustIndex: function (index) {
+            var data = this.data;
+            var count = this.getCount();
+            if (this.data.loop) {
+                for (var i = 0; i < count; i++) {
+                    var targetIndex = index + i;
+                    var optionIndex = ((targetIndex + 1) % count) - 1;
+                    if (optionIndex < 0) {
+                        optionIndex += count;
+                    }
+                    if (!this.isDisabled(data.options[optionIndex]) &&
+                        data.options[optionIndex] !== undefined) {
+                        return targetIndex;
+                    }
+                }
+                return 0;
+            }
+            var activeIndex = (0, utils_1.range)(index, 0, count);
+            for (var i = activeIndex; i < count; i++) {
+                if (!this.isDisabled(data.options[i]) && data.options[i] !== undefined)
+                    return i;
+            }
+            for (var i = activeIndex - 1; i >= 0; i--) {
+                if (!this.isDisabled(data.options[i]) && data.options[i] !== undefined)
+                    return i;
+            }
+            return 0;
+        },
+        isDisabled: function (option) {
+            return (0, validator_1.isObj)(option) && option.disabled;
+        },
         getOptionText: function (option) {
             var data = this.data;
             return (0, validator_1.isObj)(option) && data.valueKey in option ? option[data.valueKey] : option;
@@ -198,29 +293,43 @@ var getId = function () {
             return Promise.resolve();
         },
         setIndex: function (index) {
+            var activeIndex = ((index + 1) % this.data.options.length) - 1;
+            if (activeIndex < 0) {
+                activeIndex += this.data.options.length;
+            }
             this.setData({
-                activeIndex: index,
+                activeIndex: activeIndex,
+                animationIndex: index,
             });
         },
         getValue: function () {
             var data = this.data;
-            return data.options[data.activeIndex < 0 ? 0 : data.activeIndex];
-        },
-        viewOptionsChange: function (list) {
-            this.setData({
-                viewOptions: list,
-            });
+            return (0, validator_1.isObj)(data.options[data.activeIndex])
+                ? data.options[data.activeIndex][data.valueKey]
+                : data.options[data.activeIndex];
         },
         activeIndexChange: function (index) {
+            var activeIndex = ((index + 1) % this.data.options.length) - 1;
+            if (activeIndex < 0) {
+                activeIndex += this.data.options.length;
+            }
+            var isSame = activeIndex === this.data.activeIndex;
             this.setData({
-                activeIndex: index,
+                activeIndex: activeIndex,
+                animationIndex: index,
             });
-            this.$emit('change', index);
+            !isSame && this.$emit('change', index);
         },
         animationIndexChange: function (index) {
             this.setData({
                 animationIndex: index,
             });
         },
+        animationStart: function () {
+            this.$emit('animation-start');
+        },
+        animationEnd: function () {
+            this.$emit('animation-end');
+        },
     },
 });

package/lib/picker-column/index.wxml

@@ -6,6 +6,8 @@
   style="{{ computed.rootStyle({ itemHeight, visibleItemCount }) }}"
   instanceId="{{instanceId}}"
   id="{{instanceId}}"
+  data-isdestroy="{{isDestroy}}"
+  data-changeanimation="{{changeAnimation}}"
   data-options="{{options}}"
   data-valuekey="{{valueKey}}"
   data-itemheight="{{itemHeight}}"
@@ -13,13 +15,16 @@
   data-activeindex="{{activeIndex}}"
   data-loop="{{loop}}"
   data-animationtime="{{animationTime}}"
+  isdestroy="{{isDestroy}}"
   options="{{options}}" 
   activeindex="{{activeIndex}}"
+  changeanimation="{{changeAnimation}}"
   loop="{{loop}}"
   valuekey="{{valueKey}}"
   itemheight="{{itemHeight}}"
   visibleitemcount="{{visibleItemCount}}"
   animationtime="{{animationTime}}"
+  change:isdestroy="{{computed.updateValue(instanceId, 'isDestroy')}}"
   change:options="{{computed.updateValue(instanceId, 'options')}}" 
   change:valuekey="{{computed.updateValue(instanceId,'valueKey')}}" 
   change:itemheight="{{computed.updateValue(instanceId,'itemHeight')}}" 
@@ -33,42 +38,16 @@
   bind:touchend="{{computed.touchEnd(instanceId)}}"
   bind:touchcancel="{{computed.touchEnd(instanceId)}}"
 >
-  <view 
-    id="options"
-    class="smart-picker-column__offset" 
-    style="height: {{ itemHeight * options.length }}px;{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart, unit, loop }) }}" 
-  >
-    <view class="smart-picker-column__visual">
-      <view class="smart-picker-column__visual__item_1">
-        <view
-          wx:for="{{ computed.sliceArray(viewOptions, 0, 10) }}"
-          wx:key="index"
-          data-index="{{item}}"
-          style="{{computed.wrapperItemStyle({ itemHeight, animationIndex, index: item, visibleItemCount })}}"
-          class="smart-picker-column__item_{{index}} {{ computed.wrapperItemClass({ index: item, animationIndex, options })}}"
-          bind:tap="{{computed.tapItem(instanceId)}}" 
-        >
-          <view
-            class="smart-picker-column__item__text"
-            style="{{computed.wrapperItemTextStyle({ fontStyle, activeStyle, index: item, animationIndex })}}"
-          ></view>
-        </view>
-      </view>
-      <view class="smart-picker-column__visual__item_2">
-        <view
-          wx:for="{{ computed.sliceArray(viewOptions, 10) }}"
-          wx:key="index"
-          data-index="{{item}}"
-          style="{{computed.wrapperItemStyle({ itemHeight, fontStyle, activeStyle: item === currentIndex ? activeStyle : '', animationIndex, index: item, visibleItemCount })}}"
-          class="smart-picker-column__item_{{index + 10}} {{ computed.wrapperItemClass({ index: item, animationIndex, options })}}"
-          bind:tap="{{computed.tapItem(instanceId)}}" 
-        >
-          <view
-            class="smart-picker-column__item__text"
-            style="{{computed.wrapperItemTextStyle({ fontStyle, activeStyle, index: item, animationIndex })}}"
-          ></view>
-        </view>
-      </view>
+  <view class="smart-picker-column__offset" style="{{ computed.wrapperStyle({ animationIndex, itemHeight, animationTime, unit, moving, optionsVIndexList, options, valueKey, visibleItemCount, loop, changeAnimation }) }}" id="options">
+    <view
+      wx:for="{{ optionsVIndexList }}"
+      wx:for-item="optionIndex"
+      wx:key="index"
+      data-index="{{index}}"
+      style="{{computed.wrapperItemStyle({ itemHeight, index, visibleItemCount, fontStyle, activeStyle, instanceId, index, optionsVIndexList, animationIndex, options })}}"
+      class="smart-picker-column__item_{{index}} smart-ellipsis {{ computed.wrapperItemClass({ index, animationIndex, optionsVIndexList, instanceId, options })}}"
+      bind:tap="{{computed.tapItem(instanceId)}}" 
+    >
     </view>
   </view>
   <view wx:if="{{unit}}" class="smart-picker-column__unit" style="height: {{ itemHeight }}px">