@tuya-miniapp/smart-ui 2.6.0-beta-7 → 2.6.0-beta-8

package/dist/datetime-picker/index.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { SmartComponent } from '../common/component';
 import { isDef } from '../common/validator';
 import { pickerProps } from '../picker/shared';
@@ -29,6 +40,18 @@ function getTrueValue(formattedValue) {
 function getMonthEndDay(year, month) {
     return 32 - new Date(year, month - 1, 32).getDate();
 }
+function findIntersection(range1, range2) {
+    const [start1, end1] = range1;
+    const [start2, end2] = range2;
+    // 确定交集的开始和结束
+    const intersectionStart = Math.max(start1, start2);
+    const intersectionEnd = Math.min(end1, end2);
+    // 检查是否有交集
+    if (intersectionStart <= intersectionEnd) {
+        return [intersectionStart, intersectionEnd];
+    }
+    return []; // 没有交集
+}
 const defaultFormatter = (type, value) => value;
 SmartComponent({
     classes: ['active-class', 'toolbar-class', 'column-class'],
@@ -94,8 +117,9 @@ SmartComponent({
             value: undefined,
         } }),
     data: {
-        part: 0,
+        part: 'am',
         innerValue: Date.now(),
+        isCreated: false,
         columns: [],
     },
     created() {
@@ -104,12 +128,17 @@ SmartComponent({
         if (innerValue !== this.data.value) {
             this.$emit('input', innerValue);
         }
+        this.setData({
+            isCreated: true,
+        });
     },
     methods: {
         updateValue() {
-            const { data } = this;
-            const val = this.correctValue(data.value);
-            const isEqual = val === data.innerValue;
+            const { value, innerValue, isCreated } = this.data;
+            if (!isCreated)
+                return;
+            const val = this.correctValue(value);
+            const isEqual = val === innerValue;
             this.updateColumnValue(val);
             if (!isEqual) {
                 this.$emit('input', val);
@@ -127,7 +156,7 @@ SmartComponent({
         formatterFunc(type, value, data) {
             var _a, _b;
             if (type === 'part') {
-                return value === 0 ? data.amText : data.pmText;
+                return value === 'am' ? data.amText : data.pmText;
             }
             const { formatterMap, formatter = defaultFormatter } = (_a = this === null || this === void 0 ? void 0 : this.data) !== null && _a !== void 0 ? _a : data;
             const mapDetail = formatterMap === null || formatterMap === void 0 ? void 0 : formatterMap[type];
@@ -157,23 +186,33 @@ SmartComponent({
             return this.setData({ columns: results });
         },
         getOriginColumns() {
-            const { filter, is12HourClock, type, amText, pmText, columnsOrder } = this.data;
-            const results = this.getRanges().map(({ type, range }, index) => {
+            const { part, filter, is12HourClock, type, amText, pmText, columnsOrder, minHour, maxHour } = this.data;
+            const results = this.getRanges().map(({ type: timeType, range }, index) => {
                 const order = columnsOrder[index];
                 let values = times(range[1] - range[0] + 1, index => {
                     const value = range[0] + index;
-                    return type === 'year' ? `${value}` : padZero(value);
+                    if (is12HourClock && type === 'time' && timeType === 'hour') {
+                        if (part === 'pm') {
+                            if (value === 12)
+                                return '12';
+                            return padZero(value - 12);
+                        }
+                        if (value === 0)
+                            return '12';
+                        return padZero(value);
+                    }
+                    return timeType === 'year' ? `${value}` : padZero(value);
                 });
                 if (filter) {
-                    values = filter(type, values);
+                    values = filter(timeType, values);
                 }
-                return { type, values, order };
+                return { type: timeType, values, order };
             });
             if (is12HourClock && type === 'time') {
                 return [
                     {
                         type: '12HourClock',
-                        values: [amText, pmText],
+                        values: minHour > 11 ? [pmText] : maxHour < 12 ? [amText] : [amText, pmText],
                         order: columnsOrder[0],
                     },
                     ...results.map((item, index) => (Object.assign(Object.assign({}, item), { order: columnsOrder[index + 1] }))),
@@ -185,13 +224,11 @@ SmartComponent({
             const { data } = this;
             if (data.type === 'time' && data.is12HourClock) {
                 const { part } = data;
+                const time12Range = part === 'pm' ? [12, 23] : [0, 11];
                 return [
                     {
                         type: 'hour',
-                        range: [
-                            Math.max(part ? 13 : 1, data.minHour) - (part ? 12 : 0),
-                            Math.min(part ? 24 : 12, data.maxHour) - (part ? 12 : 0),
-                        ],
+                        range: findIntersection(time12Range, [data.minHour, data.maxHour]),
                     },
                     {
                         type: 'minute',
@@ -241,7 +278,7 @@ SmartComponent({
                 result.splice(2, 3);
             return result;
         },
-        correctValue(value, isOutSide) {
+        correctValue(value) {
             const { data } = this;
             // validate value
             const isDateType = data.type !== 'time';
@@ -255,17 +292,11 @@ SmartComponent({
             // time type
             if (!isDateType) {
                 let [hour, minute] = value.split(':');
-                if (Number(hour) === 0 && data.minHour > 0) {
-                    hour = 24;
-                }
-                if (Number(hour) === 24 && data.maxHour < 24) {
+                if (Number(hour) === 24) {
                     hour = 0;
                 }
                 hour = padZero(range(hour, data.minHour, data.maxHour));
                 minute = padZero(range(minute, data.minMinute, data.maxMinute));
-                if (isOutSide && Number(hour) === 24) {
-                    hour = 0;
-                }
                 return `${hour}:${minute}`;
             }
             // date type
@@ -319,15 +350,19 @@ SmartComponent({
             const picker = this.getPicker();
             const indexes = picker.getIndexes();
             if (data.type === 'time' && data.is12HourClock) {
-                const [part, hour, minute] = indexes;
+                const originColumns = this.getOriginColumns();
+                const [partText, hour, minute] = indexes.map((item, index) => originColumns[index].values[item]);
+                const part = partText === this.data.pmText ? 'pm' : 'am';
                 this.setData({
                     part,
                 });
-                const originColumns = this.getOriginColumns();
-                value = `${(part ? 12 : 0) +
-                    Number(originColumns[1].values[hour > originColumns[1].values.length - 1 ? originColumns[1].values.length - 1 : hour])}:${Number(originColumns[2].values[minute > originColumns[2].values.length - 1
-                    ? originColumns[2].values.length - 1
-                    : minute])}`;
+                value = `${part === 'pm'
+                    ? hour === '12'
+                        ? 12
+                        : Number(hour) + 12
+                    : hour === '12'
+                        ? 0
+                        : Number(hour)}:${Number(minute)}`;
             }
             else if (data.type === 'time') {
                 const originColumns = this.getOriginColumns();
@@ -353,26 +388,37 @@ SmartComponent({
                 }
                 value = new Date(year, month - 1, date, hour, minute);
             }
-            value = this.correctValue(value, true);
-            const innerValue = this.correctValue(value);
-            this.updateColumnValue(innerValue);
+            value = this.correctValue(value);
+            this.updateColumnValue(value);
             picker.value = value;
             this.$emit('input', value);
             this.$emit('change', picker);
         },
         updateColumnValue(value) {
             let values = [];
+            const _a = this.data, { columns, part, value: outerValue } = _a, rest = __rest(_a, ["columns", "part", "value"]);
+            rest.innerValue = value;
+            const dataStr = JSON.stringify(rest);
+            if (dataStr === this.preDataStr)
+                return;
+            this.preDataStr = dataStr;
             const { type, is12HourClock } = this.data;
             const formatter = this.formatterFunc;
             if (type === 'time' && is12HourClock) {
                 const [hour, minute] = value.split(':');
-                const part = Number(hour) > 0 && Number(hour) < 13 ? 0 : 1;
+                const part = Number(hour) < 12 ? 'am' : 'pm';
                 this.setData({
                     part,
                 });
                 values = [
                     formatter('part', part, this.data),
-                    formatter('hour', part ? (!hour ? '12' : (hour - 12).toString().padStart(2, '0')) : hour, this.data),
+                    formatter('hour', part === 'am'
+                        ? hour === '0'
+                            ? '12'
+                            : hour
+                        : hour === '12'
+                            ? '12'
+                            : padZero(Number(hour) - 12), this.data),
                     formatter('minute', minute, this.data),
                 ];
             }

package/dist/picker/index.js

@@ -1,7 +1,7 @@
 import { SmartComponent } from '../common/component';
 import { pickerProps } from './shared';
 SmartComponent({
-    classes: ['active-class', 'toolbar-class', 'column-class'],
+    classes: ['hairline-class', 'active-class', 'toolbar-class', 'column-class'],
     props: Object.assign(Object.assign({}, pickerProps), { valueKey: {
             type: String,
             value: 'text',

package/dist/picker/index.wxml

@@ -38,7 +38,7 @@
     />
 
     <view
-      class="smart-picker__frame smart-hairline--top-bottom"
+      class="smart-picker__frame smart-hairline--top-bottom hairline-class"
       style="{{ computed.frameStyle({ itemHeight }) }}"
     />
   </view>

package/dist/picker/index.wxs

@@ -19,6 +19,7 @@ function maskStyle(data) {
 function frameStyle(data) {
   return style({
     height: addUnit(data.itemHeight),
+    position: 'absolute'
   });
 }
 

package/dist/picker-column/index.js

@@ -52,7 +52,7 @@ SmartComponent({
             observer(index) {
                 if (!this.data.isInit)
                     return;
-                this.setIndex(index, false, this.data.changeAnimation);
+                this.setIndex(index, false, this.data.changeAnimation, this.data.animationTime);
             },
         },
         unit: {
@@ -83,7 +83,7 @@ SmartComponent({
     created() {
         const { defaultIndex, activeIndex, options } = this.data;
         this.updateUint(options);
-        this.setIndex(activeIndex !== -1 ? activeIndex : defaultIndex, false, this.data.changeAnimation);
+        this.setIndex(activeIndex !== -1 ? activeIndex : defaultIndex, false, this.data.changeAnimation, this.data.animationTime);
         this.setData({
             isInit: true,
         });
@@ -196,16 +196,19 @@ SmartComponent({
                 }
                 // 更新索引
                 if (index !== data.currentIndex) {
+                    const time = isSameTouch ? 150 : data.animationTime;
+                    // if (!isSameTouch) {
+                    //   this.timer = setInterval(() => {
+                    //     if (Math.abs(this.data.animationIndex - index) < 0.5) return clearInterval(this.timer);
+                    //     this.setData({
+                    //       animationIndex: this.data.animationIndex + (index - data.currentIndex > 0 ? 1 : -1),
+                    //     });
+                    //   }, data.animationTime / Math.abs(index - data.currentIndex));
+                    // }
                     return this.setData({
                         timer: setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-                            this.setIndex(index, true, false);
-                            // await this.setData({
-                            //   timer: null,
-                            //   currentIndex: index,
-                            //   // animationIndex: index,
-                            // });
-                            // this.$emit('change', index);
-                        }), isSameTouch ? 150 : data.animationTime),
+                            this.setIndex(index, true, false, this.data.animationTime);
+                        }), time),
                     });
                 }
                 this.setData({
@@ -225,7 +228,7 @@ SmartComponent({
                 return;
             return currOffset < preOffset ? 'down' : 'up';
         },
-        vibrateShort(count, time = 1000) {
+        vibrateShort(count, time = DEFAULT_DURATION) {
             if (!count) {
                 ty.vibrateShort({ type: 'light' });
                 return;
@@ -248,7 +251,7 @@ SmartComponent({
                 return;
             }
             this.vibrateShort(Math.abs(index - this.data.currentIndex), DEFAULT_DURATION);
-            this.setIndex(index, true, true);
+            this.setIndex(index, true, true, this.data.animationTime);
         },
         updateUint(options) {
             const { unit, valueKey } = this.data;
@@ -312,6 +315,10 @@ SmartComponent({
             const { data } = this;
             index = this.adjustIndex(index) || 0;
             const offset = -index * data.itemHeight;
+            if (this.timer) {
+                clearTimeout(this.timer);
+                this.timer = null;
+            }
             if (!data.playing) {
                 this.$emit('animation-start');
                 this.setData({
@@ -373,7 +380,7 @@ SmartComponent({
             const { options } = this.data;
             for (let i = 0; i < options.length; i++) {
                 if (this.getOptionText(options[i]) === value) {
-                    return this.setIndex(i, false, this.data.changeAnimation);
+                    return this.setIndex(i, false, this.data.changeAnimation, this.data.animationTime);
                 }
             }
             return Promise.resolve();

package/dist/picker-column/index.wxml

@@ -14,10 +14,10 @@
       <view
         wx:for="{{ optionsV }}"
         wx:for-item="option"
-        wx:key="index"
+        wx:key="*this"
         data-index="{{ renderStart + index }}"
-        style="{{computed.wrapperItemStyle({ itemHeight, fontStyle, activeStyle: renderStart + index === currentIndex ? activeStyle : '', animationIndex, index: renderStart + index })}}"
-        class="smart-ellipsis {{ utils.bem('picker-column__item', { disabled: option && option.disabled, selected: renderStart + index === currentIndex }) }} {{ renderStart + index === currentIndex ? 'active-class' : '' }}"
+        style="{{computed.wrapperItemStyle({ itemHeight, fontStyle, activeStyle: renderStart + index === currentIndex ? activeStyle : '', animationIndex, index: renderStart + index, visibleItemCount })}}"
+        class="{{ computed.wrapperItemClass({ index, renderStart, animationIndex, option })}}"
       >
         {{ computed.optionText(option, valueKey) }}
       </view>

package/dist/picker-column/index.wxs

@@ -1,6 +1,7 @@
 /* eslint-disable */
 var style = require('../wxs/style.wxs');
 var addUnit = require('../wxs/add-unit.wxs');
+var wxUtils = require('../wxs/utils.wxs');
 
 function isObj(x) {
   var type = typeof x;
@@ -49,20 +50,30 @@ function wrapperItemStyle(data) {
   var fontStyleStr = style(data.fontStyle);
   var activeStyleStr = style(data.activeStyle);
 
+  // var maxSideShow = Math.floor(data.visibleItemCount / 2) + 1;
   // var offsetIndex = data.animationIndex - data.index;
-  // var scale = Math.min(Math.abs(offsetIndex * 0.05), 0.05 * 2)
-  // var rotateX = offsetIndex * 25 > 0 ? Math.min(offsetIndex * 25, 25 * 2) : Math.max(offsetIndex * 25, -25 * 2)
+  // var scale = Math.min(Math.abs(offsetIndex * 0.2), 0.2 * maxSideShow)
+  // var rotateX = offsetIndex * 25 > 0 ? Math.min(offsetIndex * 25, 25 * maxSideShow) : Math.max(offsetIndex * 25, -25 * maxSideShow)
+  // var translateYIndex = offsetIndex > 0 ? Math.min(offsetIndex, maxSideShow) : Math.max(offsetIndex, -maxSideShow)
   // const transStyle = style({
-  //   transform: `rotateX(${rotateX}deg) scale(${1 - scale})`
+  //   transform: `rotateX(${rotateX}deg) scale(${1 - scale}) translateY(${translateYIndex * Math.abs(translateYIndex) * Math.abs(translateYIndex) * data.itemHeight * 0.1}px) translateZ(0)`,
   // });
-  // return trans + ';' + heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
+  // return transStyle + ';' + heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
   return heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
 }
 
+function wrapperItemClass(data) {
+  var staticClass = 'smart-ellipsis';
+  var activeClass = 'active-class';
+  var isActive = Math.abs(data.renderStart + data.index - data.animationIndex) < 0.9;
+  return staticClass + ' ' + wxUtils.bem('picker-column__item', { disabled: data.option && data.option.disabled, selected: isActive }) + ' ' + (isActive ? activeClass : '');
+}
+
 module.exports = {
   optionText: optionText,
   rootStyle: rootStyle,
   wrapperStyle: wrapperStyle,
   wrapperInterStyle: wrapperInterStyle,
-  wrapperItemStyle: wrapperItemStyle
+  wrapperItemStyle: wrapperItemStyle,
+  wrapperItemClass: wrapperItemClass
 };

package/lib/datetime-picker/index.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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)) {
@@ -51,6 +62,18 @@ function getTrueValue(formattedValue) {
 function getMonthEndDay(year, month) {
     return 32 - new Date(year, month - 1, 32).getDate();
 }
+function findIntersection(range1, range2) {
+    var start1 = range1[0], end1 = range1[1];
+    var start2 = range2[0], end2 = range2[1];
+    // 确定交集的开始和结束
+    var intersectionStart = Math.max(start1, start2);
+    var intersectionEnd = Math.min(end1, end2);
+    // 检查是否有交集
+    if (intersectionStart <= intersectionEnd) {
+        return [intersectionStart, intersectionEnd];
+    }
+    return []; // 没有交集
+}
 var defaultFormatter = function (type, value) {
     return value;
 };
@@ -118,8 +141,9 @@ var defaultFormatter = function (type, value) {
             value: undefined,
         } }),
     data: {
-        part: 0,
+        part: 'am',
         innerValue: Date.now(),
+        isCreated: false,
         columns: [],
     },
     created: function () {
@@ -128,12 +152,17 @@ var defaultFormatter = function (type, value) {
         if (innerValue !== this.data.value) {
             this.$emit('input', innerValue);
         }
+        this.setData({
+            isCreated: true,
+        });
     },
     methods: {
         updateValue: function () {
-            var data = this.data;
-            var val = this.correctValue(data.value);
-            var isEqual = val === data.innerValue;
+            var _a = this.data, value = _a.value, innerValue = _a.innerValue, isCreated = _a.isCreated;
+            if (!isCreated)
+                return;
+            var val = this.correctValue(value);
+            var isEqual = val === innerValue;
             this.updateColumnValue(val);
             if (!isEqual) {
                 this.$emit('input', val);
@@ -158,7 +187,7 @@ var defaultFormatter = function (type, value) {
             var _a;
             var _b, _c;
             if (type === 'part') {
-                return value === 0 ? data.amText : data.pmText;
+                return value === 'am' ? data.amText : data.pmText;
             }
             var _d = (_b = this === null || this === void 0 ? void 0 : this.data) !== null && _b !== void 0 ? _b : data, formatterMap = _d.formatterMap, _e = _d.formatter, formatter = _e === void 0 ? defaultFormatter : _e;
             var mapDetail = formatterMap === null || formatterMap === void 0 ? void 0 : formatterMap[type];
@@ -189,24 +218,34 @@ var defaultFormatter = function (type, value) {
             return this.setData({ columns: results });
         },
         getOriginColumns: function () {
-            var _a = this.data, filter = _a.filter, is12HourClock = _a.is12HourClock, type = _a.type, amText = _a.amText, pmText = _a.pmText, columnsOrder = _a.columnsOrder;
+            var _a = this.data, part = _a.part, filter = _a.filter, is12HourClock = _a.is12HourClock, type = _a.type, amText = _a.amText, pmText = _a.pmText, columnsOrder = _a.columnsOrder, minHour = _a.minHour, maxHour = _a.maxHour;
             var results = this.getRanges().map(function (_a, index) {
-                var type = _a.type, range = _a.range;
+                var timeType = _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);
+                    if (is12HourClock && type === 'time' && timeType === 'hour') {
+                        if (part === 'pm') {
+                            if (value === 12)
+                                return '12';
+                            return padZero(value - 12);
+                        }
+                        if (value === 0)
+                            return '12';
+                        return padZero(value);
+                    }
+                    return timeType === 'year' ? "".concat(value) : padZero(value);
                 });
                 if (filter) {
-                    values = filter(type, values);
+                    values = filter(timeType, values);
                 }
-                return { type: type, values: values, order: order };
+                return { type: timeType, values: values, order: order };
             });
             if (is12HourClock && type === 'time') {
                 return __spreadArray([
                     {
                         type: '12HourClock',
-                        values: [amText, pmText],
+                        values: minHour > 11 ? [pmText] : maxHour < 12 ? [amText] : [amText, pmText],
                         order: columnsOrder[0],
                     }
                 ], results.map(function (item, index) { return (__assign(__assign({}, item), { order: columnsOrder[index + 1] })); }), true).filter(Boolean);
@@ -217,13 +256,11 @@ var defaultFormatter = function (type, value) {
             var data = this.data;
             if (data.type === 'time' && data.is12HourClock) {
                 var part = data.part;
+                var time12Range = part === 'pm' ? [12, 23] : [0, 11];
                 return [
                     {
                         type: 'hour',
-                        range: [
-                            Math.max(part ? 13 : 1, data.minHour) - (part ? 12 : 0),
-                            Math.min(part ? 24 : 12, data.maxHour) - (part ? 12 : 0),
-                        ],
+                        range: findIntersection(time12Range, [data.minHour, data.maxHour]),
                     },
                     {
                         type: 'minute',
@@ -273,7 +310,7 @@ var defaultFormatter = function (type, value) {
                 result.splice(2, 3);
             return result;
         },
-        correctValue: function (value, isOutSide) {
+        correctValue: function (value) {
             var data = this.data;
             // validate value
             var isDateType = data.type !== 'time';
@@ -287,17 +324,11 @@ var defaultFormatter = function (type, value) {
             // time type
             if (!isDateType) {
                 var _a = value.split(':'), hour = _a[0], minute = _a[1];
-                if (Number(hour) === 0 && data.minHour > 0) {
-                    hour = 24;
-                }
-                if (Number(hour) === 24 && data.maxHour < 24) {
+                if (Number(hour) === 24) {
                     hour = 0;
                 }
                 hour = padZero((0, utils_1.range)(hour, data.minHour, data.maxHour));
                 minute = padZero((0, utils_1.range)(minute, data.minMinute, data.maxMinute));
-                if (isOutSide && Number(hour) === 24) {
-                    hour = 0;
-                }
                 return "".concat(hour, ":").concat(minute);
             }
             // date type
@@ -352,24 +383,28 @@ var defaultFormatter = function (type, value) {
             var picker = this.getPicker();
             var indexes = picker.getIndexes();
             if (data.type === 'time' && data.is12HourClock) {
-                var part = indexes[0], hour = indexes[1], minute = indexes[2];
+                var originColumns_1 = this.getOriginColumns();
+                var _a = indexes.map(function (item, index) { return originColumns_1[index].values[item]; }), partText = _a[0], hour = _a[1], minute = _a[2];
+                var part = partText === this.data.pmText ? 'pm' : 'am';
                 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]));
+                value = "".concat(part === 'pm'
+                    ? hour === '12'
+                        ? 12
+                        : Number(hour) + 12
+                    : hour === '12'
+                        ? 0
+                        : Number(hour), ":").concat(Number(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 originColumns_1 = this.getOriginColumns();
+                var originColumns_2 = this.getOriginColumns();
                 var indexes_1 = picker.getIndexes();
-                var values = indexes_1.map(function (value, index) { return originColumns_1[index].values[value]; });
+                var values = indexes_1.map(function (value, index) { return originColumns_2[index].values[value]; });
                 var year = getTrueValue(values[0]);
                 var month = getTrueValue(values[1]);
                 var maxDate = getMonthEndDay(year, month);
@@ -386,26 +421,37 @@ var defaultFormatter = function (type, value) {
                 }
                 value = new Date(year, month - 1, date, hour, minute);
             }
-            value = this.correctValue(value, true);
-            var innerValue = this.correctValue(value);
-            this.updateColumnValue(innerValue);
+            value = this.correctValue(value);
+            this.updateColumnValue(value);
             picker.value = value;
             this.$emit('input', value);
             this.$emit('change', picker);
         },
         updateColumnValue: function (value) {
             var values = [];
-            var _a = this.data, type = _a.type, is12HourClock = _a.is12HourClock;
+            var _a = this.data, columns = _a.columns, part = _a.part, outerValue = _a.value, rest = __rest(_a, ["columns", "part", "value"]);
+            rest.innerValue = value;
+            var dataStr = JSON.stringify(rest);
+            if (dataStr === this.preDataStr)
+                return;
+            this.preDataStr = dataStr;
+            var _b = this.data, type = _b.type, is12HourClock = _b.is12HourClock;
             var formatter = this.formatterFunc;
             if (type === 'time' && is12HourClock) {
-                var _b = value.split(':'), hour = _b[0], minute = _b[1];
-                var part = Number(hour) > 0 && Number(hour) < 13 ? 0 : 1;
+                var _c = value.split(':'), hour = _c[0], minute = _c[1];
+                var part_1 = Number(hour) < 12 ? 'am' : 'pm';
                 this.setData({
-                    part: part,
+                    part: part_1,
                 });
                 values = [
-                    formatter('part', part, this.data),
-                    formatter('hour', part ? (!hour ? '12' : (hour - 12).toString().padStart(2, '0')) : hour, this.data),
+                    formatter('part', part_1, this.data),
+                    formatter('hour', part_1 === 'am'
+                        ? hour === '0'
+                            ? '12'
+                            : hour
+                        : hour === '12'
+                            ? '12'
+                            : padZero(Number(hour) - 12), this.data),
                     formatter('minute', minute, this.data),
                 ];
             }

package/lib/picker/index.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var component_1 = require("../common/component");
 var shared_1 = require("./shared");
 (0, component_1.SmartComponent)({
-    classes: ['active-class', 'toolbar-class', 'column-class'],
+    classes: ['hairline-class', 'active-class', 'toolbar-class', 'column-class'],
     props: __assign(__assign({}, shared_1.pickerProps), { valueKey: {
             type: String,
             value: 'text',

package/lib/picker/index.wxml

@@ -38,7 +38,7 @@
     />
 
     <view
-      class="smart-picker__frame smart-hairline--top-bottom"
+      class="smart-picker__frame smart-hairline--top-bottom hairline-class"
       style="{{ computed.frameStyle({ itemHeight }) }}"
     />
   </view>

package/lib/picker/index.wxs

@@ -19,6 +19,7 @@ function maskStyle(data) {
 function frameStyle(data) {
   return style({
     height: addUnit(data.itemHeight),
+    position: 'absolute'
   });
 }
 

package/lib/picker-column/index.js

@@ -93,7 +93,7 @@ var DEFAULT_DURATION = 400;
             observer: function (index) {
                 if (!this.data.isInit)
                     return;
-                this.setIndex(index, false, this.data.changeAnimation);
+                this.setIndex(index, false, this.data.changeAnimation, this.data.animationTime);
             },
         },
         unit: {
@@ -124,7 +124,7 @@ var DEFAULT_DURATION = 400;
     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, this.data.changeAnimation);
+        this.setIndex(activeIndex !== -1 ? activeIndex : defaultIndex, false, this.data.changeAnimation, this.data.animationTime);
         this.setData({
             isInit: true,
         });
@@ -187,7 +187,7 @@ var DEFAULT_DURATION = 400;
         },
         onTouchEnd: function () {
             return __awaiter(this, void 0, void 0, function () {
-                var data, preOffsetList, preOffset, isSameTouch, direction, offset, countHeight, animationOffset, finOffset, index, offsetData, countVibrate;
+                var data, preOffsetList, preOffset, isSameTouch, direction, offset, countHeight, animationOffset, finOffset, index, offsetData, countVibrate, time;
                 var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
@@ -236,13 +236,22 @@ var DEFAULT_DURATION = 400;
                         case 2:
                             // 更新索引
                             if (index !== data.currentIndex) {
+                                time = isSameTouch ? 150 : data.animationTime;
+                                // if (!isSameTouch) {
+                                //   this.timer = setInterval(() => {
+                                //     if (Math.abs(this.data.animationIndex - index) < 0.5) return clearInterval(this.timer);
+                                //     this.setData({
+                                //       animationIndex: this.data.animationIndex + (index - data.currentIndex > 0 ? 1 : -1),
+                                //     });
+                                //   }, data.animationTime / Math.abs(index - data.currentIndex));
+                                // }
                                 return [2 /*return*/, this.setData({
                                         timer: setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
                                             return __generator(this, function (_a) {
-                                                this.setIndex(index, true, false);
+                                                this.setIndex(index, true, false, this.data.animationTime);
                                                 return [2 /*return*/];
                                             });
-                                        }); }, isSameTouch ? 150 : data.animationTime),
+                                        }); }, time),
                                     })];
                             }
                             this.setData({
@@ -267,7 +276,7 @@ var DEFAULT_DURATION = 400;
         },
         vibrateShort: function (count, time) {
             var _this = this;
-            if (time === void 0) { time = 1000; }
+            if (time === void 0) { time = DEFAULT_DURATION; }
             if (!count) {
                 ty_1.default.vibrateShort({ type: 'light' });
                 return;
@@ -290,7 +299,7 @@ var DEFAULT_DURATION = 400;
                 return;
             }
             this.vibrateShort(Math.abs(index - this.data.currentIndex), DEFAULT_DURATION);
-            this.setIndex(index, true, true);
+            this.setIndex(index, true, true, this.data.animationTime);
         },
         updateUint: function (options) {
             var _a = this.data, unit = _a.unit, valueKey = _a.valueKey;
@@ -356,6 +365,10 @@ var DEFAULT_DURATION = 400;
             var data = this.data;
             index = this.adjustIndex(index) || 0;
             var offset = -index * data.itemHeight;
+            if (this.timer) {
+                clearTimeout(this.timer);
+                this.timer = null;
+            }
             if (!data.playing) {
                 this.$emit('animation-start');
                 this.setData({
@@ -417,7 +430,7 @@ var DEFAULT_DURATION = 400;
             var options = this.data.options;
             for (var i = 0; i < options.length; i++) {
                 if (this.getOptionText(options[i]) === value) {
-                    return this.setIndex(i, false, this.data.changeAnimation);
+                    return this.setIndex(i, false, this.data.changeAnimation, this.data.animationTime);
                 }
             }
             return Promise.resolve();

package/lib/picker-column/index.wxml

@@ -14,10 +14,10 @@
       <view
         wx:for="{{ optionsV }}"
         wx:for-item="option"
-        wx:key="index"
+        wx:key="*this"
         data-index="{{ renderStart + index }}"
-        style="{{computed.wrapperItemStyle({ itemHeight, fontStyle, activeStyle: renderStart + index === currentIndex ? activeStyle : '', animationIndex, index: renderStart + index })}}"
-        class="smart-ellipsis {{ utils.bem('picker-column__item', { disabled: option && option.disabled, selected: renderStart + index === currentIndex }) }} {{ renderStart + index === currentIndex ? 'active-class' : '' }}"
+        style="{{computed.wrapperItemStyle({ itemHeight, fontStyle, activeStyle: renderStart + index === currentIndex ? activeStyle : '', animationIndex, index: renderStart + index, visibleItemCount })}}"
+        class="{{ computed.wrapperItemClass({ index, renderStart, animationIndex, option })}}"
       >
         {{ computed.optionText(option, valueKey) }}
       </view>

package/lib/picker-column/index.wxs

@@ -1,6 +1,7 @@
 /* eslint-disable */
 var style = require('../wxs/style.wxs');
 var addUnit = require('../wxs/add-unit.wxs');
+var wxUtils = require('../wxs/utils.wxs');
 
 function isObj(x) {
   var type = typeof x;
@@ -49,20 +50,30 @@ function wrapperItemStyle(data) {
   var fontStyleStr = style(data.fontStyle);
   var activeStyleStr = style(data.activeStyle);
 
+  // var maxSideShow = Math.floor(data.visibleItemCount / 2) + 1;
   // var offsetIndex = data.animationIndex - data.index;
-  // var scale = Math.min(Math.abs(offsetIndex * 0.05), 0.05 * 2)
-  // var rotateX = offsetIndex * 25 > 0 ? Math.min(offsetIndex * 25, 25 * 2) : Math.max(offsetIndex * 25, -25 * 2)
+  // var scale = Math.min(Math.abs(offsetIndex * 0.2), 0.2 * maxSideShow)
+  // var rotateX = offsetIndex * 25 > 0 ? Math.min(offsetIndex * 25, 25 * maxSideShow) : Math.max(offsetIndex * 25, -25 * maxSideShow)
+  // var translateYIndex = offsetIndex > 0 ? Math.min(offsetIndex, maxSideShow) : Math.max(offsetIndex, -maxSideShow)
   // const transStyle = style({
-  //   transform: `rotateX(${rotateX}deg) scale(${1 - scale})`
+  //   transform: `rotateX(${rotateX}deg) scale(${1 - scale}) translateY(${translateYIndex * Math.abs(translateYIndex) * Math.abs(translateYIndex) * data.itemHeight * 0.1}px) translateZ(0)`,
   // });
-  // return trans + ';' + heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
+  // return transStyle + ';' + heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
   return heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
 }
 
+function wrapperItemClass(data) {
+  var staticClass = 'smart-ellipsis';
+  var activeClass = 'active-class';
+  var isActive = Math.abs(data.renderStart + data.index - data.animationIndex) < 0.9;
+  return staticClass + ' ' + wxUtils.bem('picker-column__item', { disabled: data.option && data.option.disabled, selected: isActive }) + ' ' + (isActive ? activeClass : '');
+}
+
 module.exports = {
   optionText: optionText,
   rootStyle: rootStyle,
   wrapperStyle: wrapperStyle,
   wrapperInterStyle: wrapperInterStyle,
-  wrapperItemStyle: wrapperItemStyle
+  wrapperItemStyle: wrapperItemStyle,
+  wrapperItemClass: wrapperItemClass
 };

package/package.json

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