@tuya-miniapp/smart-ui 2.3.6-beta-3 → 2.3.6-beta-5

package/dist/checkbox/index.wxml

@@ -5,11 +5,11 @@
   <view
     wx:if="{{ labelPosition === 'left' }}"
     class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
-    bindtap="onClickLabel"
+    catch:tap="onClickLabel"
   >
     <slot />
   </view>
-  <view class="smart-checkbox__icon-wrap" bindtap="toggle">
+  <view class="smart-checkbox__icon-wrap" catch:tap="toggle">
     <slot wx:if="{{ useIconSlot }}" name="icon" />
     <smart-icon
       wx:else
@@ -25,7 +25,7 @@
   <view
     wx:if="{{ labelPosition === 'right' }}"
     class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
-    bindtap="onClickLabel"
+    catch:tap="onClickLabel"
   >
     <slot />
   </view>

package/dist/circle/index.js

@@ -58,16 +58,20 @@ SmartComponent({
             value: true,
         },
     },
+    watch: {
+        dpr() {
+            this.render(this.data.percent, this.data.canvasId);
+        },
+    },
     data: {
         canvasId: '',
         dpr: 1,
     },
-    created() {
+    created() { },
+    mounted() {
         this.initId();
         this.initRate();
-    },
-    mounted() {
-        this.render(this.data.percent, this.data.canvasId);
+        // this.render(this.data.percent, this.data.canvasId);
     },
     destroyed() {
         idListRef.value = idListRef.value.filter(id => id !== this.data.canvasId);
@@ -90,25 +94,20 @@ SmartComponent({
             wx.getSystemInfo({
                 success: res => {
                     const dpr = res.pixelRatio; // 获取设备像素比
-                    this.setData({
-                        dpr: dpr,
-                    });
+                    const sizeVal = this.parseSize();
+                    const params = {
+                        width: +sizeVal,
+                        height: +sizeVal,
+                        lineWidth: this.data.trackWidth,
+                        trackColor: this.data.trackColor,
+                        fillColor: this.data.fillColor,
+                        fillColorStops: this.data.fillColorStops,
+                        maskColor: this.data.maskColor,
+                        dpr: this.data.dpr,
+                    };
+                    this.setData(Object.assign(Object.assign({}, params), { dpr: dpr }));
                 },
             });
-            const sizeVal = this.parseSize();
-            const params = {
-                canvasWidth: +sizeVal,
-                canvasHeight: +sizeVal,
-                width: +sizeVal,
-                height: +sizeVal,
-                lineWidth: this.data.trackWidth,
-                trackColor: this.data.trackColor,
-                fillColor: this.data.fillColor,
-                fillColorStops: this.data.fillColorStops,
-                maskColor: this.data.maskColor,
-                dpr: this.data.dpr,
-            };
-            this.setData(params);
         },
         renderAll(canvas, ctx, progress, ops = {
             lineCap: 'round',
@@ -119,7 +118,6 @@ SmartComponent({
             const endAngle = 4 * Math.PI; // 结束角度（360度）
             // 绘制环形进度条的函数
             function drawProgressBar(progress, color) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                 // 绘制灰色背景
                 ctx.beginPath();
                 ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
@@ -149,7 +147,6 @@ SmartComponent({
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
-                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -164,7 +161,6 @@ SmartComponent({
             const endAngle = 2 * Math.PI; // 结束角度（360度）
             // 绘制环形进度条的函数
             function drawProgressBar(progress, color) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                 // 绘制灰色背景
                 ctx.beginPath();
                 ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
@@ -194,7 +190,6 @@ SmartComponent({
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
-                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -220,7 +215,6 @@ SmartComponent({
             const endAngle = 2.2 * Math.PI; // 结束角度（360度）
             // 绘制环形进度条的函数
             function drawProgressBar(progress, color) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                 // 绘制灰色背景
                 ctx.beginPath();
                 ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
@@ -250,7 +244,6 @@ SmartComponent({
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
-                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -259,6 +252,11 @@ SmartComponent({
         render(val, canvasId) {
             // @ts-ignore
             const context = ty.createCanvasContext(canvasId);
+            context.clearRect(0, 0, this.data.width, this.data.height); // 清除画布
+            context.scale(this.data.dpr, this.data.dpr);
+            this.data.width /= this.data.dpr;
+            this.data.height /= this.data.dpr;
+            this.data.lineWidth /= this.data.dpr;
             if (this.data.mode === 'basic') {
                 this.renderAll(this.data, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }

package/dist/circle/index.wxml

@@ -2,8 +2,8 @@
   class="smart-progress-circle" 
   type="2d" 
   wx:if="{{canvasId}}" 
-  width="{{ canvasWidth * dpr }}"
-  height="{{ canvasHeight * dpr }}"
+  width="{{ width * dpr }}"
+  height="{{ height * dpr }}"
   canvas-id="{{canvasId}}" 
   style="width: {{width}}px; height:{{height}}px; {{customStyle}}"
 ></canvas>

package/dist/datetime-picker/index.js

@@ -86,6 +86,12 @@ SmartComponent({
         }, formatterMap: {
             type: Object,
             value: undefined,
+        }, columnStyles: {
+            type: Object,
+            value: undefined,
+        }, fontStyles: {
+            type: Object,
+            value: undefined,
         } }),
     data: {
         part: 0,
@@ -134,11 +140,13 @@ SmartComponent({
             return formatter(type, value);
         },
         updateColumns() {
-            const { locale } = this.data;
+            const { locale, columnStyles, fontStyles } = this.data;
             const results = this.getOriginColumns().map(column => ({
                 values: column.values.map(value => this.formatterFunc(column.type, value, this.data)),
                 order: column.order,
                 unit: locale === null || locale === void 0 ? void 0 : locale[column.type],
+                style: columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[column.type],
+                fontStyle: fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles[column.type],
             }));
             return this.set({ columns: results });
         },

package/dist/datetime-picker/index.wxml

@@ -6,6 +6,8 @@
   title="{{ title }}"
   columns="{{ columns }}"
   item-height="{{ itemHeight }}"
+  active-style="{{ activeStyle }}"
+  animation-time="{{ animationTime }}"
   show-toolbar="{{ showToolbar }}"
   visible-item-count="{{ visibleItemCount }}"
   confirm-button-text="{{ confirmButtonText }}"

package/dist/icon/index.wxs

@@ -69,7 +69,7 @@ function svgStyle(data) {
 
 function svgPathStyle(data) {
   // 构建SVG字符串
-  var svg = '<svg class="icon" width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="' + data.name + " fill=" + (data.color || 'currentColor') + '" fill-rule="evenodd"></path></svg>'
+  var svg = '<svg class="icon" width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="' + data.name + " fill=" + ('currentColor') + '" fill-rule="evenodd"></path></svg>'
   var imageBase64Src = 'url("data:image/svg+xml,' + encodeURIComponent(svg) + '")';
   var ret = style([
     {

package/dist/picker/index.js

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

package/dist/picker/index.wxml

@@ -17,6 +17,7 @@
       wx:for="{{ computed.columns(columns) }}"
       wx:key="index"
       data-index="{{ index }}"
+      animation-time="{{ animationTime }}"
       custom-class="column-class"
       value-key="{{ valueKey }}"
       style="order: {{ item.order }}; {{ computed.style(item.style) }}"

package/dist/picker/shared.d.ts

@@ -22,4 +22,12 @@ export declare const pickerProps: {
         type: BooleanConstructor;
         value: boolean;
     };
+    animationTime: {
+        type: NumberConstructor;
+        value: number;
+    };
+    activeStyle: {
+        type: StringConstructor;
+        value: string;
+    };
 };

package/dist/picker/shared.js

@@ -22,4 +22,12 @@ export const pickerProps = {
         type: Boolean,
         value: true,
     },
+    animationTime: {
+        type: Number,
+        value: 800,
+    },
+    activeStyle: {
+        type: String,
+        value: '',
+    },
 };

package/dist/picker-column/index.js

@@ -58,6 +58,10 @@ SmartComponent({
             type: String,
             value: '',
         },
+        animationTime: {
+            type: Number,
+            value: 800,
+        },
     },
     data: {
         startY: 0,
@@ -175,11 +179,11 @@ SmartComponent({
                 if (Math.abs(offsetData - data.offset) > data.itemHeight && !isSameTouch) {
                     const countVibrate = Math.abs(offsetData - data.offset) / data.itemHeight;
                     // @ts-ignore
-                    this.vibrateShort(Math.floor(countVibrate), 800);
+                    this.vibrateShort(Math.floor(countVibrate), data.animationTime);
                 }
                 // 最终定位索引
                 this.setData({
-                    duration: isSameTouch ? 150 : 800,
+                    duration: isSameTouch ? 150 : data.animationTime,
                     // animationIndex: index,
                     offset: offsetData,
                     animate: true,
@@ -200,7 +204,7 @@ SmartComponent({
                             //   // animationIndex: index,
                             // });
                             // this.$emit('change', index);
-                        }), isSameTouch ? 150 : 800),
+                        }), isSameTouch ? 150 : data.animationTime),
                     });
                 }
                 this.setData({

package/dist/popup/index.wxs

@@ -2,6 +2,7 @@
 var style = require('../wxs/style.wxs');
 
 function popupStyle(data) {
+  const transformStyle = "transform: translate3d(0, calc(100% + " + data.bottomSafeHeight + "px), 0)";
   return style([
     {
       'margin-bottom': data.bottomSafeHeight + 'px',
@@ -9,6 +10,7 @@ function popupStyle(data) {
       '-webkit-transition-duration': data.currentDuration + 'ms',
       'transition-duration': data.currentDuration + 'ms',
     },
+    data.status === 'enter' ? null : transformStyle,
     data.display ? null : 'display: none',
     data.customStyle,
   ]);

package/dist/popup/popup.wxml

@@ -3,7 +3,7 @@
 <view
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
-  style="{{ computed.popupStyle({ zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
+  style="{{ computed.popupStyle({ status, zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
   catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
 >
   <slot />

package/lib/checkbox/index.wxml

@@ -5,11 +5,11 @@
   <view
     wx:if="{{ labelPosition === 'left' }}"
     class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
-    bindtap="onClickLabel"
+    catch:tap="onClickLabel"
   >
     <slot />
   </view>
-  <view class="smart-checkbox__icon-wrap" bindtap="toggle">
+  <view class="smart-checkbox__icon-wrap" catch:tap="toggle">
     <slot wx:if="{{ useIconSlot }}" name="icon" />
     <smart-icon
       wx:else
@@ -25,7 +25,7 @@
   <view
     wx:if="{{ labelPosition === 'right' }}"
     class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
-    bindtap="onClickLabel"
+    catch:tap="onClickLabel"
   >
     <slot />
   </view>

package/lib/circle/index.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
@@ -60,16 +71,20 @@ var idListRef = {
             value: true,
         },
     },
+    watch: {
+        dpr: function () {
+            this.render(this.data.percent, this.data.canvasId);
+        },
+    },
     data: {
         canvasId: '',
         dpr: 1,
     },
-    created: function () {
+    created: function () { },
+    mounted: function () {
         this.initId();
         this.initRate();
-    },
-    mounted: function () {
-        this.render(this.data.percent, this.data.canvasId);
+        // this.render(this.data.percent, this.data.canvasId);
     },
     destroyed: function () {
         var _this = this;
@@ -94,25 +109,20 @@ var idListRef = {
             wx.getSystemInfo({
                 success: function (res) {
                     var dpr = res.pixelRatio; // 获取设备像素比
-                    _this.setData({
-                        dpr: dpr,
-                    });
+                    var sizeVal = _this.parseSize();
+                    var params = {
+                        width: +sizeVal,
+                        height: +sizeVal,
+                        lineWidth: _this.data.trackWidth,
+                        trackColor: _this.data.trackColor,
+                        fillColor: _this.data.fillColor,
+                        fillColorStops: _this.data.fillColorStops,
+                        maskColor: _this.data.maskColor,
+                        dpr: _this.data.dpr,
+                    };
+                    _this.setData(__assign(__assign({}, params), { dpr: dpr }));
                 },
             });
-            var sizeVal = this.parseSize();
-            var params = {
-                canvasWidth: +sizeVal,
-                canvasHeight: +sizeVal,
-                width: +sizeVal,
-                height: +sizeVal,
-                lineWidth: this.data.trackWidth,
-                trackColor: this.data.trackColor,
-                fillColor: this.data.fillColor,
-                fillColorStops: this.data.fillColorStops,
-                maskColor: this.data.maskColor,
-                dpr: this.data.dpr,
-            };
-            this.setData(params);
         },
         renderAll: function (canvas, ctx, progress, ops) {
             if (ops === void 0) { ops = {
@@ -124,7 +134,6 @@ var idListRef = {
             var endAngle = 4 * Math.PI; // 结束角度（360度）
             // 绘制环形进度条的函数
             function drawProgressBar(progress, color) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                 // 绘制灰色背景
                 ctx.beginPath();
                 ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
@@ -154,7 +163,6 @@ var idListRef = {
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
-                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -170,7 +178,6 @@ var idListRef = {
             var endAngle = 2 * Math.PI; // 结束角度（360度）
             // 绘制环形进度条的函数
             function drawProgressBar(progress, color) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                 // 绘制灰色背景
                 ctx.beginPath();
                 ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
@@ -200,7 +207,6 @@ var idListRef = {
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
-                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -227,7 +233,6 @@ var idListRef = {
             var endAngle = 2.2 * Math.PI; // 结束角度（360度）
             // 绘制环形进度条的函数
             function drawProgressBar(progress, color) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                 // 绘制灰色背景
                 ctx.beginPath();
                 ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
@@ -257,7 +262,6 @@ var idListRef = {
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
-                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -266,6 +270,11 @@ var idListRef = {
         render: function (val, canvasId) {
             // @ts-ignore
             var context = ty.createCanvasContext(canvasId);
+            context.clearRect(0, 0, this.data.width, this.data.height); // 清除画布
+            context.scale(this.data.dpr, this.data.dpr);
+            this.data.width /= this.data.dpr;
+            this.data.height /= this.data.dpr;
+            this.data.lineWidth /= this.data.dpr;
             if (this.data.mode === 'basic') {
                 this.renderAll(this.data, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }

package/lib/circle/index.wxml

@@ -2,8 +2,8 @@
   class="smart-progress-circle" 
   type="2d" 
   wx:if="{{canvasId}}" 
-  width="{{ canvasWidth * dpr }}"
-  height="{{ canvasHeight * dpr }}"
+  width="{{ width * dpr }}"
+  height="{{ height * dpr }}"
   canvas-id="{{canvasId}}" 
   style="width: {{width}}px; height:{{height}}px; {{customStyle}}"
 ></canvas>

package/lib/datetime-picker/index.js

@@ -110,6 +110,12 @@ var defaultFormatter = function (type, value) {
         }, formatterMap: {
             type: Object,
             value: undefined,
+        }, columnStyles: {
+            type: Object,
+            value: undefined,
+        }, fontStyles: {
+            type: Object,
+            value: undefined,
         } }),
     data: {
         part: 0,
@@ -168,11 +174,13 @@ var defaultFormatter = function (type, value) {
         },
         updateColumns: function () {
             var _this = this;
-            var locale = this.data.locale;
+            var _a = this.data, locale = _a.locale, columnStyles = _a.columnStyles, fontStyles = _a.fontStyles;
             var results = this.getOriginColumns().map(function (column) { return ({
                 values: column.values.map(function (value) { return _this.formatterFunc(column.type, value, _this.data); }),
                 order: column.order,
                 unit: locale === null || locale === void 0 ? void 0 : locale[column.type],
+                style: columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[column.type],
+                fontStyle: fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles[column.type],
             }); });
             return this.set({ columns: results });
         },

package/lib/datetime-picker/index.wxml

@@ -6,6 +6,8 @@
   title="{{ title }}"
   columns="{{ columns }}"
   item-height="{{ itemHeight }}"
+  active-style="{{ activeStyle }}"
+  animation-time="{{ animationTime }}"
   show-toolbar="{{ showToolbar }}"
   visible-item-count="{{ visibleItemCount }}"
   confirm-button-text="{{ confirmButtonText }}"

package/lib/icon/index.wxs

@@ -69,7 +69,7 @@ function svgStyle(data) {
 
 function svgPathStyle(data) {
   // 构建SVG字符串
-  var svg = '<svg class="icon" width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="' + data.name + " fill=" + (data.color || 'currentColor') + '" fill-rule="evenodd"></path></svg>'
+  var svg = '<svg class="icon" width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="' + data.name + " fill=" + ('currentColor') + '" fill-rule="evenodd"></path></svg>'
   var imageBase64Src = 'url("data:image/svg+xml,' + encodeURIComponent(svg) + '")';
   var ret = style([
     {

package/lib/picker/index.js

@@ -15,10 +15,7 @@ var component_1 = require("../common/component");
 var shared_1 = require("./shared");
 (0, component_1.SmartComponent)({
     classes: ['active-class', 'toolbar-class', 'column-class'],
-    props: __assign(__assign({}, shared_1.pickerProps), { activeStyle: {
-            type: String,
-            value: '',
-        }, valueKey: {
+    props: __assign(__assign({}, shared_1.pickerProps), { valueKey: {
             type: String,
             value: 'text',
         }, toolbarPosition: {

package/lib/picker/index.wxml

@@ -17,6 +17,7 @@
       wx:for="{{ computed.columns(columns) }}"
       wx:key="index"
       data-index="{{ index }}"
+      animation-time="{{ animationTime }}"
       custom-class="column-class"
       value-key="{{ valueKey }}"
       style="order: {{ item.order }}; {{ computed.style(item.style) }}"

package/lib/picker/shared.d.ts

@@ -22,4 +22,12 @@ export declare const pickerProps: {
         type: BooleanConstructor;
         value: boolean;
     };
+    animationTime: {
+        type: NumberConstructor;
+        value: number;
+    };
+    activeStyle: {
+        type: StringConstructor;
+        value: string;
+    };
 };

package/lib/picker/shared.js

@@ -25,4 +25,12 @@ exports.pickerProps = {
         type: Boolean,
         value: true,
     },
+    animationTime: {
+        type: Number,
+        value: 800,
+    },
+    activeStyle: {
+        type: String,
+        value: '',
+    },
 };

package/lib/picker-column/index.js

@@ -96,6 +96,10 @@ var DEFAULT_DURATION = 400;
             type: String,
             value: '',
         },
+        animationTime: {
+            type: Number,
+            value: 800,
+        },
     },
     data: {
         startY: 0,
@@ -210,11 +214,11 @@ var DEFAULT_DURATION = 400;
                             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.vibrateShort(Math.floor(countVibrate), data.animationTime);
                             }
                             // 最终定位索引
                             this.setData({
-                                duration: isSameTouch ? 150 : 800,
+                                duration: isSameTouch ? 150 : data.animationTime,
                                 // animationIndex: index,
                                 offset: offsetData,
                                 animate: true,
@@ -234,7 +238,7 @@ var DEFAULT_DURATION = 400;
                                                 this.setIndex(index, true, false);
                                                 return [2 /*return*/];
                                             });
-                                        }); }, isSameTouch ? 150 : 800),
+                                        }); }, isSameTouch ? 150 : data.animationTime),
                                     })];
                             }
                             this.setData({

package/lib/popup/index.wxs

@@ -2,6 +2,7 @@
 var style = require('../wxs/style.wxs');
 
 function popupStyle(data) {
+  const transformStyle = "transform: translate3d(0, calc(100% + " + data.bottomSafeHeight + "px), 0)";
   return style([
     {
       'margin-bottom': data.bottomSafeHeight + 'px',
@@ -9,6 +10,7 @@ function popupStyle(data) {
       '-webkit-transition-duration': data.currentDuration + 'ms',
       'transition-duration': data.currentDuration + 'ms',
     },
+    data.status === 'enter' ? null : transformStyle,
     data.display ? null : 'display: none',
     data.customStyle,
   ]);

package/lib/popup/popup.wxml

@@ -3,7 +3,7 @@
 <view
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
-  style="{{ computed.popupStyle({ zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
+  style="{{ computed.popupStyle({ status, zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
   catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
 >
   <slot />

package/package.json

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