@tuya-miniapp/smart-ui 2.1.10 → 2.1.11-beta-2

package/lib/datetime-picker/index.js

@@ -23,13 +23,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var component_1 = require("../common/component");
 var validator_1 = require("../common/validator");
 var shared_1 = require("../picker/shared");
+var utils_1 = require("../common/utils");
 var currentYear = new Date().getFullYear();
 function isValidDate(date) {
     return (0, validator_1.isDef)(date) && !isNaN(new Date(date).getTime());
 }
-function range(num, min, max) {
-    return Math.min(Math.max(num, min), max);
-}
 function padZero(val) {
     return "00".concat(val).slice(-2);
 }
@@ -73,6 +71,18 @@ var defaultFormatter = function (type, value) {
         }, formatter: {
             type: null,
             value: defaultFormatter,
+        }, AMText: {
+            type: String,
+            value: 'AM',
+        }, PMText: {
+            type: String,
+            value: 'PM',
+        }, columnsOrder: {
+            type: Array,
+            value: [],
+        }, is12HoursTime: {
+            type: Boolean,
+            value: false,
         }, minDate: {
             type: Number,
             value: new Date(currentYear - 10, 0, 1).getTime(),
@@ -97,8 +107,12 @@ var defaultFormatter = function (type, value) {
             type: Number,
             value: 59,
             observer: 'updateValue',
+        }, formatterMap: {
+            type: Object,
+            value: undefined,
         } }),
     data: {
+        part: 0,
         innerValue: Date.now(),
         columns: [],
     },
@@ -129,18 +143,34 @@ var defaultFormatter = function (type, value) {
             }
             return this.picker;
         },
+        formatterFunc: function (type, value) {
+            var _a;
+            var _b;
+            var _c = this.data, formatterMap = _c.formatterMap, _d = _c.formatter, formatter = _d === void 0 ? defaultFormatter : _d;
+            var mapDetail = formatterMap === null || formatterMap === void 0 ? void 0 : formatterMap[type];
+            if (typeof mapDetail === 'string') {
+                return (0, utils_1.replacePlaceholders)(mapDetail, (_a = {}, _a[type] = value, _a));
+            }
+            if (typeof mapDetail === 'object') {
+                return (_b = mapDetail[value]) !== null && _b !== void 0 ? _b : formatter(type, value);
+            }
+            return formatter(type, value);
+        },
         updateColumns: function () {
-            var _a = this.data, _b = _a.formatter, formatter = _b === void 0 ? defaultFormatter : _b, locale = _a.locale;
+            var _this = this;
+            var locale = this.data.locale;
             var results = this.getOriginColumns().map(function (column) { return ({
-                values: column.values.map(function (value) { return formatter(column.type, value); }),
+                values: column.values.map(function (value) { return _this.formatterFunc(column.type, value); }),
+                order: column.order,
                 unit: locale === null || locale === void 0 ? void 0 : locale[column.type],
             }); });
             return this.set({ columns: results });
         },
         getOriginColumns: function () {
-            var filter = this.data.filter;
-            var results = this.getRanges().map(function (_a) {
+            var _a = this.data, filter = _a.filter, is12HoursTime = _a.is12HoursTime, type = _a.type, AMText = _a.AMText, PMText = _a.PMText, columnsOrder = _a.columnsOrder;
+            var results = this.getRanges().map(function (_a, index) {
                 var type = _a.type, range = _a.range;
+                var order = columnsOrder[index];
                 var values = times(range[1] - range[0] + 1, function (index) {
                     var value = range[0] + index;
                     return type === 'year' ? "".concat(value) : padZero(value);
@@ -148,12 +178,37 @@ var defaultFormatter = function (type, value) {
                 if (filter) {
                     values = filter(type, values);
                 }
-                return { type: type, values: values };
+                return { type: type, values: values, order: order };
             });
+            if (is12HoursTime && type === 'time') {
+                return __spreadArray([
+                    {
+                        type: '12hours',
+                        values: [AMText, PMText],
+                        order: columnsOrder[0],
+                    }
+                ], results.map(function (item, index) { return (__assign(__assign({}, item), { order: columnsOrder[index + 1] })); }), true).filter(Boolean);
+            }
             return results;
         },
         getRanges: function () {
             var data = this.data;
+            if (data.type === 'time' && data.is12HoursTime) {
+                var part = data.part;
+                return [
+                    {
+                        type: 'hour',
+                        range: [
+                            Math.max(part ? 13 : 1, data.minHour) - (part ? 12 : 0),
+                            Math.min(part ? 24 : 12, data.maxHour) - (part ? 12 : 0),
+                        ],
+                    },
+                    {
+                        type: 'minute',
+                        range: [data.minMinute, data.maxMinute],
+                    },
+                ];
+            }
             if (data.type === 'time') {
                 return [
                     {
@@ -210,8 +265,8 @@ var defaultFormatter = function (type, value) {
             // time type
             if (!isDateType) {
                 var _a = value.split(':'), hour = _a[0], minute = _a[1];
-                hour = padZero(range(hour, data.minHour, data.maxHour));
-                minute = padZero(range(minute, data.minMinute, data.maxMinute));
+                hour = padZero((0, utils_1.range)(hour, data.minHour, data.maxHour));
+                minute = padZero((0, utils_1.range)(minute, data.minMinute, data.maxMinute));
                 return "".concat(hour, ":").concat(minute);
             }
             // date type
@@ -265,14 +320,26 @@ var defaultFormatter = function (type, value) {
             var data = this.data;
             var value;
             var picker = this.getPicker();
-            var originColumns = this.getOriginColumns();
-            if (data.type === 'time') {
-                var indexes = picker.getIndexes();
+            var indexes = picker.getIndexes();
+            if (data.type === 'time' && data.is12HoursTime) {
+                var part = indexes[0], hour = indexes[1], minute = indexes[2];
+                this.setData({
+                    part: part,
+                });
+                var originColumns = this.getOriginColumns();
+                value = "".concat((part ? 12 : 0) +
+                    Number(originColumns[1].values[hour > originColumns[1].values.length - 1 ? originColumns[1].values.length - 1 : hour]), ":").concat(Number(originColumns[2].values[minute > originColumns[2].values.length - 1
+                    ? originColumns[2].values.length - 1
+                    : minute]));
+            }
+            else if (data.type === 'time') {
+                var originColumns = this.getOriginColumns();
                 value = "".concat(+originColumns[0].values[indexes[0]], ":").concat(+originColumns[1].values[indexes[1]]);
             }
             else {
-                var indexes = picker.getIndexes();
-                var values = indexes.map(function (value, index) { return originColumns[index].values[value]; });
+                var originColumns_1 = this.getOriginColumns();
+                var indexes_1 = picker.getIndexes();
+                var values = indexes_1.map(function (value, index) { return originColumns_1[index].values[value]; });
                 var year = getTrueValue(values[0]);
                 var month = getTrueValue(values[1]);
                 var maxDate = getMonthEndDay(year, month);
@@ -298,10 +365,22 @@ var defaultFormatter = function (type, value) {
         updateColumnValue: function (value) {
             var _this = this;
             var values = [];
-            var type = this.data.type;
-            var formatter = this.data.formatter || defaultFormatter;
+            var _a = this.data, type = _a.type, is12HoursTime = _a.is12HoursTime;
+            var formatter = this.formatterFunc;
             var picker = this.getPicker();
-            if (type === 'time') {
+            if (type === 'time' && is12HoursTime) {
+                var _b = value.split(':'), hour = _b[0], minute = _b[1];
+                var part = Number(hour) > 0 && Number(hour) < 13 ? 0 : 1;
+                this.setData({
+                    part: part,
+                });
+                values = [
+                    part,
+                    formatter('hour', part ? (!hour ? 12 : hour - 12) : hour),
+                    formatter('minute', minute),
+                ];
+            }
+            else if (type === 'time') {
                 var pair = value.split(':');
                 values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
             }

package/lib/datetime-picker/index.wxml

@@ -10,6 +10,7 @@
   visible-item-count="{{ visibleItemCount }}"
   confirm-button-text="{{ confirmButtonText }}"
   cancel-button-text="{{ cancelButtonText }}"
+  change-animation="{{ changeAnimation }}"
   bind:change="onChange"
   bind:confirm="onConfirm"
   bind:cancel="onCancel"

package/lib/field/index.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var utils_1 = require("../common/utils");
 var component_1 = require("../common/component");
 var props_1 = require("./props");
-var Xmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark"));
+var Xmark_js_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark.js"));
 (0, component_1.SmartComponent)({
     field: true,
     classes: ['input-class', 'right-icon-class', 'label-class'],
@@ -40,7 +40,7 @@ var Xmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark"));
             value: '6.2em',
         }, clearIcon: {
             type: String,
-            value: Xmark_1.default,
+            value: Xmark_js_1.default,
         }, extraEventParams: {
             type: Boolean,
             value: false,

package/lib/icon/index.wxs

@@ -14,7 +14,7 @@ function rootClass(data) {
   var classes = ['custom-class'];
 
   if (data.classPrefix !== 'smart-icon') {
-    classes.push('smart-icon--custom')
+    classes.push('smart-icon--custom');
   }
 
   if (data.classPrefix != null) {
@@ -54,6 +54,8 @@ function svgStyle(data) {
     {
       '-webkit-mask-image': imageBase64Src,
       '-webkit-mask-size': 'contain',
+      '-webkit-mask-repeat': 'no-repeat',
+      '-webkit-mask-position': 'center',
       'mask-image': imageBase64Src,
       'mask-size': 'contain',
       width: data.size,

package/lib/notice-bar/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var component_1 = require("../common/component");
 var utils_1 = require("../common/utils");
-var Xmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark"));
+var Xmark_js_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark.js"));
 var Right_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Right"));
 (0, component_1.SmartComponent)({
     props: {
@@ -83,7 +83,7 @@ var Right_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Right"));
         wrapable: Boolean,
     },
     data: {
-        Xmark: Xmark_1.default,
+        Xmark: Xmark_js_1.default,
         Right: Right_1.default,
         show: true,
     },

package/lib/picker/demo/index.js

@@ -51,6 +51,7 @@ var toast_1 = __importDefault(require("../../toast/toast"));
     methods: {
         onChange1: function (event) {
             var _a = event.detail, value = _a.value, index = _a.index;
+            console.log("Value: ".concat(value, ", Index\uFF1A").concat(index));
             (0, toast_1.default)({
                 context: this,
                 message: "Value: ".concat(value, ", Index\uFF1A").concat(index),

package/lib/picker/index.wxml

@@ -19,10 +19,11 @@
       data-index="{{ index }}"
       custom-class="column-class"
       value-key="{{ valueKey }}"
-      style="{{ item.style }}"
+      style="order: {{ item.order }}; {{ item.style }}"
       active-style="{{ activeStyle }}"
       options="{{ item.values }}"
       unit="{{ item.unit || unit }}"
+      changeAnimation="{{ changeAnimation }}"
       default-index="{{ item.defaultIndex || defaultIndex }}"
       active-index="{{ item.activeIndex || activeIndex }}"
       item-height="{{ itemHeight }}"

package/lib/picker/shared.d.ts

@@ -18,4 +18,8 @@ export declare const pickerProps: {
         type: NumberConstructor;
         value: number;
     };
+    changeAnimation: {
+        type: BooleanConstructor;
+        value: boolean;
+    };
 };

package/lib/picker/shared.js

@@ -21,4 +21,8 @@ exports.pickerProps = {
         type: Number,
         value: 44,
     },
+    changeAnimation: {
+        type: Boolean,
+        value: true,
+    },
 };

package/lib/picker-column/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);position:relative;text-align:center}.smart-picker-column__item{padding:0 5px}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.smart-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.smart-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)}.smart-picker-column__unit_hidden{opacity:0}.smart-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}
+@import '../common/index.css';.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);text-align:center}.smart-picker-column,.smart-picker-column__offset{position:relative;width:100%}.smart-picker-column__visual{position:absolute;top:0;width:100%}.smart-picker-column__item{pointer-events:none}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.smart-picker-column__mask{background:transparent;display:flex;flex-direction:column;height:100%;position:absolute;top:0;width:100%;z-index:10}.smart-picker-column__mask__item{flex:1}.smart-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.smart-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)}.smart-picker-column__unit_hidden{opacity:0}.smart-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}

package/lib/picker-column/index.js

@@ -1,9 +1,54 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var component_1 = require("../common/component");
 var utils_1 = require("../common/utils");
 var validator_1 = require("../common/validator");
-var DEFAULT_DURATION = 200;
+var DEFAULT_DURATION = 400;
 (0, component_1.SmartComponent)({
     classes: ['active-class'],
     props: {
@@ -27,11 +72,15 @@ var DEFAULT_DURATION = 200;
             type: Number,
             value: 0,
         },
+        changeAnimation: {
+            type: Boolean,
+            value: true,
+        },
         activeIndex: {
             type: Number,
             value: -1,
             observer: function (index) {
-                this.setIndex(index, false, true);
+                this.setIndex(index, false, this.data.changeAnimation);
             },
         },
         unit: {
@@ -50,57 +99,158 @@ var DEFAULT_DURATION = 200;
         renderStart: 0,
         animate: false,
         maxText: '',
+        timer: null,
+        // animationIndex: -1,
+        preOffsetList: [],
     },
     created: function () {
         var _a = this.data, defaultIndex = _a.defaultIndex, activeIndex = _a.activeIndex, options = _a.options;
         this.updateUint(options);
-        this.setIndex(activeIndex !== -1 ? activeIndex : defaultIndex, false, true);
+        this.setIndex(activeIndex !== -1 ? activeIndex : defaultIndex, false, this.data.changeAnimation);
     },
     methods: {
         getCount: function () {
             return this.data.options.length;
         },
         onTouchStart: function (event) {
+            if (this.data.timer) {
+                clearTimeout(this.data.timer);
+                this.setData({
+                    timer: null,
+                });
+            }
             this.setData({
                 startY: event.touches[0].clientY,
                 startOffset: this.data.offset,
-                duration: 0,
+                duration: 100,
+                timer: null,
+                preOffsetList: [this.data.offset],
             });
         },
         onTouchMove: function (event) {
             var data = this.data;
+            var preOffsetList = data.preOffsetList;
             var deltaY = event.touches[0].clientY - data.startY;
+            var offset = (0, utils_1.range)(data.startOffset + deltaY, -(this.getCount() * data.itemHeight), data.itemHeight);
+            var direction = this.checkIsDown(offset);
+            // 上一次滚动的索引
+            var preIndex = (0, utils_1.range)(Math.round(-preOffsetList[preOffsetList.length - 1] / data.itemHeight), 0, this.getCount() - 1);
+            // 最终定位索引
+            var index = (0, utils_1.range)(Math.round(-offset / data.itemHeight), 0, this.getCount() - 1);
+            if ((direction === 'up' && index < data.renderStart + 8) ||
+                (direction === 'down' && index > data.renderStart + data.renderNum - 8)) {
+                this.updateVisibleOptions(index);
+            }
+            // 索引变化时 粗发震动反馈
+            if (index !== preIndex) {
+                // @ts-ignore
+                this.vibrateShort();
+            }
+            // const animationIndex = Math.abs(-offset / data.itemHeight);
             this.setData({
-                offset: (0, utils_1.range)(data.startOffset + deltaY, -(this.getCount() * data.itemHeight), data.itemHeight),
+                offset: offset,
+                // animationIndex: animationIndex,
+                preOffsetList: __spreadArray(__spreadArray([], data.preOffsetList, true), [offset], false),
+                animate: false,
             });
         },
         onTouchEnd: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var data, preOffsetList, preOffset, isSameTouch, direction, offset, countHeight, animationOffset, finOffset, index, offsetData, countVibrate;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            data = this.data;
+                            preOffsetList = data.preOffsetList;
+                            preOffset = Math.max(Math.abs(preOffsetList[preOffsetList.length - 3] - preOffsetList[preOffsetList.length - 4]), Math.abs(preOffsetList[preOffsetList.length - 2] - preOffsetList[preOffsetList.length - 3]), Math.abs(preOffsetList[preOffsetList.length - 1] - preOffsetList[preOffsetList.length - 2]));
+                            if (isNaN(preOffset))
+                                preOffset = 0;
+                            preOffset = Math.min(preOffset, 40);
+                            isSameTouch = (preOffsetList[preOffsetList.length - 1] === preOffsetList[preOffsetList.length - 2] &&
+                                preOffsetList[preOffsetList.length - 2] === preOffsetList[preOffsetList.length - 3]) ||
+                                preOffsetList[preOffsetList.length - 1] === -(this.getCount() * data.itemHeight) ||
+                                preOffsetList[preOffsetList.length - 1] === data.itemHeight;
+                            direction = this.checkIsDown();
+                            offset = Math.abs(preOffset) < 3 || isSameTouch || !direction
+                                ? data.offset
+                                : data.offset + (direction === 'down' ? -preOffset : preOffset) * 10;
+                            countHeight = (this.getCount() - 1) * data.itemHeight;
+                            animationOffset = (0, utils_1.range)(offset, -(this.getCount() * data.itemHeight), data.itemHeight);
+                            finOffset = animationOffset < -countHeight ? -countHeight : animationOffset > 0 ? 0 : animationOffset;
+                            index = (0, utils_1.range)(Math.round(-finOffset / data.itemHeight), 0, this.getCount() - 1);
+                            offsetData = -index * data.itemHeight;
+                            // 增加惯性音效
+                            if (Math.abs(offsetData - data.offset) > data.itemHeight && !isSameTouch) {
+                                countVibrate = Math.abs(offsetData - data.offset) / data.itemHeight;
+                                // @ts-ignore
+                                this.vibrateShort(Math.floor(countVibrate), 800);
+                            }
+                            // 最终定位索引
+                            this.setData({
+                                duration: isSameTouch ? 150 : 800,
+                                // animationIndex: index,
+                                offset: offsetData,
+                                animate: true,
+                            });
+                            if (!((direction === 'up' && index < data.renderStart + 8) ||
+                                (direction === 'down' && index > data.renderStart + data.renderNum - 8))) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.updateVisibleOptions(index)];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            // 更新索引
+                            if (index !== data.currentIndex) {
+                                this.setData({
+                                    timer: setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+                                        return __generator(this, function (_a) {
+                                            this.setIndex(index, true, false);
+                                            return [2 /*return*/];
+                                        });
+                                    }); }, isSameTouch ? 150 : 800),
+                                });
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        },
+        checkIsDown: function (curr) {
             var data = this.data;
-            if (data.offset !== data.startOffset) {
-                var index = (0, utils_1.range)(Math.round(-data.offset / data.itemHeight), 0, this.getCount() - 1);
-                this.setIndex(index, true, true);
-            }
+            var preOffsetList = data.preOffsetList;
+            var currOffset = curr === undefined ? preOffsetList[preOffsetList.length - 1] : curr;
+            var preOffset = curr === undefined
+                ? preOffsetList[preOffsetList.length - 2]
+                : preOffsetList[preOffsetList.length - 1];
+            if (currOffset === undefined || preOffset === undefined || currOffset === preOffset)
+                return;
+            return currOffset < preOffset ? 'down' : 'up';
         },
-        onTransitionEnd: function () {
-            var _a = this.data, options = _a.options, visibleItemCount = _a.visibleItemCount, currentIndex = _a.currentIndex;
-            var renderNum = 0;
-            var renderStart = 0;
-            if (visibleItemCount < 20 && options.length > visibleItemCount) {
-                // 选项多于20个时，进行列表优化
-                renderNum = Math.max(visibleItemCount * 2, 20);
-                renderStart = Math.max(0, currentIndex - renderNum / 2);
-                var optionsV = options.slice(renderStart, renderStart + renderNum);
-                this.setData({ optionsV: optionsV, renderStart: renderStart, renderNum: renderNum, animate: false });
-            }
-            else {
-                this.setData({ animate: false });
-            }
-            if (this.fireChange) {
-                this.$emit('change', currentIndex);
+        vibrateShort: function (count, time) {
+            var _this = this;
+            if (time === void 0) { time = 1000; }
+            if (!count) {
+                // @ts-ignore
+                ty.vibrateShort({ type: 'light' });
+                return;
             }
+            var has = 0;
+            var timer = setInterval(function () {
+                if (has >= count) {
+                    clearInterval(timer);
+                    return;
+                }
+                has++;
+                _this.vibrateShort();
+            }, time / count - 20);
         },
         onClickItem: function (event) {
             var index = event.currentTarget.dataset.index;
+            if (index === this.data.currentIndex || index < 0 || index > this.data.options.length - 1) {
+                return;
+            }
+            this.vibrateShort(Math.abs(index - this.data.currentIndex), DEFAULT_DURATION);
             this.setIndex(index, true, true);
         },
         updateUint: function (options) {
@@ -122,7 +272,7 @@ var DEFAULT_DURATION = 200;
             if (visibleItemCount < 20 && options.length > visibleItemCount) {
                 var renderNum = 0;
                 var renderStart = 0;
-                // 选项多于20个时，进行列表优化
+                // 选项多于 20 个时，进行列表优化
                 renderNum = Math.max(visibleItemCount * 2, 20);
                 renderStart = Math.max(0, targetIndex - renderNum / 2);
                 var renderEnd = Math.min(options.length, renderStart + renderNum);
@@ -161,36 +311,34 @@ var DEFAULT_DURATION = 200;
             var data = this.data;
             return (0, validator_1.isObj)(option) && data.valueKey in option ? option[data.valueKey] : option;
         },
-        setIndex: function (index, userAction, animate) {
+        setIndex: function (index, userAction, animate, time) {
             var _this = this;
+            if (time === void 0) { time = DEFAULT_DURATION; }
             var data = this.data;
             index = this.adjustIndex(index) || 0;
             var offset = -index * data.itemHeight;
-            this.fireChange = false;
             if (index !== data.currentIndex) {
                 // 需要动画的情况下，保持最大的截取
+                this.updateVisibleOptions(index);
                 if (animate) {
-                    return this.updateVisibleOptions(index).then(function () {
-                        _this.set({
-                            currentIndex: index,
-                            offset: offset,
-                            animate: true,
-                            duration: DEFAULT_DURATION,
-                        }).then(function () {
-                            if (!userAction)
-                                return;
-                            if ([0, data.optionsV.length - 1].includes(index)) {
-                                _this.$emit('change', index);
-                                return;
-                            }
-                            _this.fireChange = true;
-                        });
+                    return this.set({
+                        currentIndex: index,
+                        // animationIndex: index,
+                        offset: offset,
+                        animate: true,
+                        duration: time,
+                    }).then(function () {
+                        if (!userAction)
+                            return;
+                        console.log('change', index);
+                        _this.$emit('change', index);
                     });
                 }
                 return this.set({
                     optionsV: data.options,
                     offset: offset,
                     currentIndex: index,
+                    // animationIndex: index,
                     renderStart: 0,
                     animate: !!animate,
                 }).then(function () {
@@ -203,7 +351,7 @@ var DEFAULT_DURATION = 200;
             var options = this.data.options;
             for (var i = 0; i < options.length; i++) {
                 if (this.getOptionText(options[i]) === value) {
-                    return this.setIndex(i, false, true);
+                    return this.setIndex(i, false, this.data.changeAnimation);
                 }
             }
             return Promise.resolve();