@ray-js/components 1.7.56-beta.1 → 1.7.56-beta.10

package/lib/Animated/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Animated - 纯净底层动画组件
+ */
+import React from 'react';
+import type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './types';
+/**
+ * 默认导出
+ */
+declare const Animated: {
+    View: React.ForwardRefExoticComponent<Omit<AnimatedProps, "mode"> & React.RefAttributes<AnimatedViewRef>>;
+    Text: React.ForwardRefExoticComponent<Omit<AnimatedProps, "mode"> & React.RefAttributes<AnimatedTextRef>>;
+};
+export default Animated;
+export type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './types';

package/lib/Animated/index.js

@@ -1,23 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["finish"];
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.for-each.js";
 import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
+/* eslint-disable import/no-named-as-default */
 /**
  * Animated - 纯净底层动画组件
- *
- * 只提供三个核心方法：
- * - setProperty(property, value): 设置动画属性
- * - setStyle(style): 设置样式
- * - setText(text): 设置文本内容
- *
- * 可以配合任何动画库使用（GSAP、Anime.js、Framer Motion 等）
  */
-import React, { forwardRef, useImperativeHandle, useRef, useMemo, useCallback } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useMemo, useCallback, useEffect } from 'react';
 import TyAnimatedComponent from './native/ty-animated';
 
 // 小程序 API 声明
@@ -45,14 +37,40 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
     mode = 'view',
     onAnimationStart,
     onAnimationEnd,
-    // 核心触摸事件（只保留最常用的三个）
+    // 核心触摸事件
     onClick,
     onTouchStart,
-    onTouchEnd
+    onTouchEnd,
+    onTouchMove,
+    onTouchCancel,
+    onLongPress,
+    lockOnClick
+    // lockOnLongPress,
   } = props;
-  const callbackRef = useRef(onAnimationEnd);
+
+  // 使用队列管理多个 play() 的回调
+  // 因为基础库会触发多次 finish 事件（旧动画被打断 + 新动画完成）
+  // 当前动画的回调
+  // 同一时间只有一个动画在执行，新动画会打断旧动画
+  const currentCallbackRef = useRef(null);
   const componentIdRef = useRef(id || "animated-".concat(Math.random().toString(36).slice(2, 11)));
 
+  // 组件卸载时清理未完成的动画 Promise
+  useEffect(() => {
+    return () => {
+      const callback = currentCallbackRef.current;
+      if (callback) {
+        // console.log(`[Animated][${Date.now()}] 组件卸载，resolve 未完成的动画 Promise`)
+        callback({
+          detail: {
+            unmounted: true
+          }
+        });
+        currentCallbackRef.current = null;
+      }
+    };
+  }, []);
+
   // 提取文本内容（当 mode='text' 时）
   const textContent = useMemo(() => {
     if (mode !== 'text' || !children) return undefined;
@@ -61,23 +79,24 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return undefined;
   }, [mode, children]);
+
+  /**
+   * 获取 DOM 实例
+   */
+  const getDomInstance = () => {
+    try {
+      var _getCurrentPages;
+      const pages = (_getCurrentPages = getCurrentPages) === null || _getCurrentPages === void 0 ? void 0 : _getCurrentPages();
+      if (!pages || pages.length === 0) return null;
+      const currentPage = pages[pages.length - 1];
+      if (!(currentPage !== null && currentPage !== void 0 && currentPage.selectComponent)) return null;
+      return currentPage.selectComponent("#".concat(componentIdRef.current));
+    } catch (error) {
+      console.error('[Animated] 获取组件实例失败:', error);
+      return null;
+    }
+  };
   useImperativeHandle(ref, () => {
-    /**
-     * 获取 DOM 实例
-     */
-    const getDomInstance = () => {
-      try {
-        var _getCurrentPages;
-        const pages = (_getCurrentPages = getCurrentPages) === null || _getCurrentPages === void 0 ? void 0 : _getCurrentPages();
-        if (!pages || pages.length === 0) return null;
-        const currentPage = pages[pages.length - 1];
-        if (!(currentPage !== null && currentPage !== void 0 && currentPage.selectComponent)) return null;
-        return currentPage.selectComponent("#".concat(componentIdRef.current));
-      } catch (error) {
-        console.error('[Animated] 获取组件实例失败:', error);
-        return null;
-      }
-    };
     return {
       /**
        * 设置样式（直通通道）
@@ -85,16 +104,56 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
        * @example
        * ref.current.setStyle({ color: 'red', fontSize: '16px', border: '1px solid #ccc' })
        */
-      setStyle(styleValue) {
-        var _inst$setCustomStyle;
-        const inst = getDomInstance();
-        if (!inst) return;
+      setStyle(styleValue, callback) {
+        return new Promise(resolve => {
+          var _inst$setCustomStyle;
+          const inst = getDomInstance();
+          if (!inst) {
+            throw new Error('No DOM instance found');
+          }
+
+          // 防止传入 undefined 或空值
+          if (styleValue === undefined || styleValue === null) {
+            console.warn('styleValue is undefined or null');
+            resolve();
+            if (callback) callback();
+            return;
+          }
+          const styleString = typeof styleValue === 'string' ? styleValue : styleToString(styleValue);
+          if (!styleString) {
+            console.warn('styleString is empty');
+            resolve();
+            if (callback) callback();
+            return;
+          }
 
-        // 防止传入 undefined 或空值
-        if (styleValue === undefined || styleValue === null) return;
-        const styleString = typeof styleValue === 'string' ? styleValue : styleToString(styleValue);
-        if (!styleString) return;
-        (_inst$setCustomStyle = inst.setCustomStyle) === null || _inst$setCustomStyle === void 0 || _inst$setCustomStyle.call(inst, styleString);
+          // 如果有动画在执行，setStyle 会清空 transition，打断动画
+          // 主动 resolve 当前 Promise
+          const animCallback = currentCallbackRef.current;
+          if (animCallback) {
+            // console.log(`[Animated][${Date.now()}] setStyle 打断动画，resolve Promise`)
+            animCallback({
+              detail: {
+                interruptedBySetStyle: true
+              }
+            });
+            currentCallbackRef.current = null;
+          }
+
+          // setData 完成后的回调
+          (_inst$setCustomStyle = inst.setCustomStyle) === null || _inst$setCustomStyle === void 0 || _inst$setCustomStyle.call(inst, styleString, () => {
+            // 调用用户回调
+            if (callback && typeof callback === 'function') {
+              try {
+                callback();
+              } catch (error) {
+                console.error('[Animated] setStyle callback error:', error);
+              }
+            }
+            // resolve Promise
+            resolve();
+          });
+        });
       },
       /**
        * 设置文本内容（仅 mode='text' 时可用）
@@ -109,39 +168,81 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
         }
         const inst = getDomInstance();
         if (!inst) {
-          console.warn('[Animated] setText: 无法获取组件实例');
-          return;
+          throw new Error('No DOM instance found');
         }
         (_inst$__applyText = inst.__applyText) === null || _inst$__applyText === void 0 || _inst$__applyText.call(inst, text);
       },
       /**
-       * 使用小程序原生动画 API
-       * 这是性能最优的动画方式
+       * 创建动画对象
+       * 使用小程序原生动画 API，这是性能最优的动画方式
+       *
+       * @param options - 动画配置（duration, timingFunction, delay, transformOrigin）
+       * @returns Animation 实例，包含 play() 方法
        *
        * @example
-       * ref.current?.animate((anim) => {
-       *   anim.translateX(100).scale(1.2).step({ duration: 300 })
-       * }, { transformOrigin: 'center center' })
+       * // 创建并执行动画
+       * const animation = ref.current.animate()
+       * animation.translateX(100).scale(1.2).step({ duration: 300 })
+       * animation.translateY(50).step({ duration: 200 })
+       * await animation.play()
+       * console.log('动画完成！')
+       *
+       * // 链式调用
+       * const animation = ref.current
+       *   .animate({ transformOrigin: '50% 50%' })
+       *   .translateX(100)
+       *   .scale(1.2)
+       *   .step({ duration: 300 })
+       * await animation.play()
+       *
+       * // 复用动画
+       * const slideIn = ref.current.animate().translateX(100).step({ duration: 300 })
+       * await slideIn.play() // 第一次
+       * await slideIn.play() // 第二次
        */
-      animate(callback, options) {
-        var _inst$__apply;
+      animate(options) {
+        var _inst$_getCreateAnima;
         const inst = getDomInstance();
         if (!inst) {
-          console.warn('[Animated] animate: 无法获取组件实例');
-          return;
+          throw new Error('No DOM instance found');
         }
-        const _ref2 = options || {},
-          {
-            finish
-          } = _ref2,
-          option = _objectWithoutProperties(_ref2, _excluded);
-        if (finish && typeof finish === 'function') {
-          callbackRef.current = event => {
-            finish(event);
-            callbackRef.current = null;
-          };
+
+        // 获取 createAnimation 函数
+        const createAnimation = (_inst$_getCreateAnima = inst._getCreateAnimation) === null || _inst$_getCreateAnima === void 0 ? void 0 : _inst$_getCreateAnima.call(inst);
+        if (!createAnimation) {
+          console.error('[Animated] createAnimation 不可用');
+          return null;
         }
-        (_inst$__apply = inst.__apply) === null || _inst$__apply === void 0 || _inst$__apply.call(inst, callback, option);
+
+        // 创建小程序原生 Animation 实例
+        const animation = createAnimation(options);
+
+        // 扩展 play 方法
+        animation.play = () => {
+          return new Promise(resolve => {
+            var _inst$__applyAnimData;
+            // 如果有旧的 Promise，主动 resolve 它（被新动画打断）
+            const oldCallback = currentCallbackRef.current;
+            if (oldCallback) {
+              // console.log(`[Animated][${Date.now()}] 新动画开始，把之前的动画给中断掉`)
+              oldCallback({
+                detail: {
+                  interrupted: true
+                }
+              });
+            }
+
+            // 保存新的 callback
+            currentCallbackRef.current = resolve;
+
+            // console.log(`[Animated][${Date.now()}] play() 调用`)
+
+            // 导出动画数据
+            const animationData = animation.export();
+            (_inst$__applyAnimData = inst.__applyAnimData) === null || _inst$__applyAnimData === void 0 || _inst$__applyAnimData.call(inst, animationData);
+          });
+        };
+        return animation;
       },
       /**
        * 获取元素的布局位置和尺寸信息
@@ -159,7 +260,9 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
             const query = ty.createSelectorQuery();
             query.select("#".concat(componentIdRef.current)).boundingClientRect(rect => {
               resolve(rect || null);
-            }).exec();
+            }).exec(() => {
+              // exec callback
+            });
           } catch (error) {
             console.error('[Animated] getBoundingClientRect 执行失败:', error);
             resolve(null);
@@ -182,7 +285,9 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
             const query = ty.createSelectorQuery();
             query.select("#".concat(componentIdRef.current)).fields(fields, res => {
               resolve(res || null);
-            }).exec();
+            }).exec(() => {
+              // exec callback
+            });
           } catch (error) {
             console.error('[Animated] getFields 执行失败:', error);
             resolve(null);
@@ -219,7 +324,9 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
                 }
               });
               resolve(Object.keys(styles).length > 0 ? styles : null);
-            }).exec();
+            }).exec(() => {
+              // exec callback
+            });
           } catch (error) {
             console.error('[Animated] getComputedStyle 执行失败:', error);
             resolve(null);
@@ -235,18 +342,66 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
     return typeof style === 'object' ? styleToString(style) : style;
   }, [style]);
   const handleAnimationEnd = useCallback(event => {
-    if (callbackRef.current) {
-      callbackRef.current(event);
-      callbackRef.current = null;
+    const callback = currentCallbackRef.current;
+    if (callback) {
+      callback(event);
+      currentCallbackRef.current = null;
     }
     if (onAnimationEnd) {
       onAnimationEnd();
     }
-  }, [onAnimationEnd, callbackRef.current]);
+  }, [onAnimationEnd]);
+
+  // 包装 onClick，如果启用了 lockOnClick
+  const wrappedOnClick = useMemo(() => {
+    if (!onClick) return undefined;
+    if (lockOnClick) {
+      // 声明式锁：包装 onClick，完成后通过 setData 触发解锁
+      return async event => {
+        Date.now(); // console.log(`[Animated.React][${startTime}] 🎯 onClick 开始执行`)
+        try {
+          await onClick(event);
+          // console.log(
+          //   `[Animated.React][${Date.now()}] onClick 执行完成，耗时: ${Date.now() - startTime}ms`
+          // )
+        } catch (error) {
+          console.error("[Animated.React][".concat(Date.now(), "] onClick \u6267\u884C\u5931\u8D25:"), error);
+          throw error;
+        } finally {
+          // 等待事件执行完成，自动解锁
+          await new Promise(resolve => {
+            const inst = getDomInstance();
+            inst.__unlockEvent('click', resolve);
+          });
+          // console.log('click 已解锁')
+        }
+      };
+    }
+    return onClick;
+  }, [onClick, lockOnClick]);
+
+  // 自动检测哪些事件需要加锁
+  const autoLockEvents = useMemo(() => {
+    const events = [];
+
+    // 通过 prop 声明
+    if (lockOnClick) {
+      events.push('click');
+    }
+
+    // if (events.length > 0) {
+    //   console.log(`[Animated][${Date.now()}] 自动加锁事件:`, events)
+    // }
+
+    return events;
+  }, [onClick, lockOnClick]);
   const eventBindings = {};
-  if (onClick) eventBindings['bind:click'] = onClick;
+  if (wrappedOnClick) eventBindings['bind:click'] = wrappedOnClick;
   if (onTouchStart) eventBindings['bind:touchstart'] = onTouchStart;
   if (onTouchEnd) eventBindings['bind:touchend'] = onTouchEnd;
+  if (onTouchMove) eventBindings['bind:touchmove'] = onTouchMove;
+  if (onTouchCancel) eventBindings['bind:touchcancel'] = onTouchCancel;
+  if (onLongPress) eventBindings['bind:longpress'] = onLongPress;
   if (onAnimationStart) eventBindings['bind:animationbegin'] = onAnimationStart;
   eventBindings['bind:animationfinish'] = handleAnimationEnd;
   return (
@@ -255,12 +410,16 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
     React.createElement(TyAnimatedComponent, _extends({
       id: componentIdRef.current,
       __mode: mode,
-      customClass: className
-    }, customStyleValue ? {
-      customStyle: customStyleValue
+      __componentId: componentIdRef.current
+    }, className ? {
+      __className: className
+    } : {}, customStyleValue ? {
+      __style: customStyleValue
     } : {}, mode === 'text' && textContent !== undefined ? {
       __text: textContent
-    } : {}, eventBindings), mode === 'view' ? children : null)
+    } : {}, autoLockEvents ? {
+      __autoLockEvents: autoLockEvents
+    } : [], eventBindings), mode === 'view' ? children : null)
   );
 });
 AnimatedBase.displayName = 'AnimatedBase';
@@ -292,4 +451,4 @@ const Animated = {
 };
 export default Animated;
 
-// 导出类型
+// 导出类型和工具函数

package/lib/Animated/native/ty-animated/index.js

@@ -1,3 +1,10 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "core-js/modules/es.string.trim.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/web.dom-collections.iterator.js";
 // @ts-nocheck
 /**
  * TyAnimated - 高性能动画组件（小程序原生层）
@@ -22,25 +29,6 @@ Component({
       type: String,
       value: ''
     },
-    // 兼容 FastView 接口
-    customStyle: {
-      type: String,
-      value: '',
-      observer: function (v) {
-        this.setData({
-          __style: v
-        });
-      }
-    },
-    customClass: {
-      type: String,
-      value: '',
-      observer: function (v) {
-        this.setData({
-          __className: v
-        });
-      }
-    },
     onAnimationStart: {
       type: null,
       value: null
@@ -61,20 +49,40 @@ Component({
   },
   lifetimes: {
     attached() {
-      // 组件初始化
+      // 初始化
+      // 为每个事件类型维护独立的锁
+      this._locks = {};
+      this._componentId = this.data.__componentId || this.id;
+      this._excludedTouchStartIdentifier = new Set();
     },
     detached() {
-      // 清理工作
+      //
     }
   },
   methods: {
+    /**
+     * 原生层事件锁：解锁（支持指定事件类型）
+     * @param eventType - 事件类型，如 'click', 'longPress'
+     * @param resolve - Promise resolve 函数
+     */
+    __unlockEvent(eventType, resolve) {
+      if (!eventType) {
+        console.warn('[TyAnimated] __unlockEvent: eventType is required');
+        resolve();
+        return;
+      }
+
+      // 清除内部事件锁状态
+      this._locks[eventType] = false;
+      resolve();
+    },
     /**
      * 事件处理器
      */
     __handleTiggerEvent(eventName, e) {
       // 触发自定义事件，让外部可以监听
       this.triggerEvent(eventName, e, {
-        // bubbles: true,
+        bubbles: false,
         composed: true
       });
     },
@@ -106,15 +114,55 @@ Component({
       }
       return null;
     },
-    setCustomStyle(value) {
+    /**
+     * 解析样式字符串为对象
+     */
+    _parseStyle(styleString) {
+      if (!styleString) return {};
+      const result = {};
+      const styles = styleString.split(';').filter(Boolean);
+      styles.forEach(style => {
+        const colonIndex = style.indexOf(':');
+        if (colonIndex > 0) {
+          const key = style.substring(0, colonIndex).trim();
+          const value = style.substring(colonIndex + 1).trim();
+          if (key && value) {
+            result[key] = value;
+          }
+        }
+      });
+      return result;
+    },
+    /**
+     * 样式对象转字符串
+     */
+    _styleToString(styleObj) {
+      return Object.entries(styleObj).map(_ref => {
+        let [key, value] = _ref;
+        return "".concat(key, ":").concat(value);
+      }).join(';');
+    },
+    setCustomStyle(value, callback) {
       // 防止传入 undefined 或 null 导致小程序报错
       if (value === undefined || value === null) {
         console.warn('[TyAnimatedComponent] setCustomStyle: value is undefined or null, ignored');
+        if (callback) callback();
         return;
       }
+
+      // 合并样式
+      const currentStyle = this._parseStyle(this.data.__style || '');
+      const newStyle = this._parseStyle(value);
+      const mergedStyle = _objectSpread(_objectSpread({}, currentStyle), newStyle);
+      let mergedStyleString = this._styleToString(mergedStyle);
+      if (mergedStyleString === this.data.__style && this.data.__animData !== null) {
+        // 添加一个不影响渲染的注释，使样式字符串不同
+        mergedStyleString = "".concat(mergedStyleString, ";/* ").concat(Date.now(), " */");
+      }
       this.setData({
-        __style: value,
-        customStyle: value
+        __style: mergedStyleString
+      }, () => {
+        if (callback) callback();
       });
     },
     /**
@@ -127,6 +175,15 @@ Component({
         });
       }
     },
+    __applyAnimData(animData) {
+      if (!animData) {
+        console.warn('[TyAnimatedComponent] __applyAnimData: animData is null or undefined');
+        return;
+      }
+      this.setData({
+        __animData: animData
+      });
+    },
     /**
      * 核心方法：直接应用 Animation 对象
      * @param {Function} fn - 接收 Animation 实例的回调函数
@@ -155,15 +212,62 @@ Component({
         __animData: animData
       });
     },
-    // 核心触摸事件处理（只保留最常用的）
-    __onClick(e) {
-      this.__handleTiggerEvent('click', e);
-    },
     __onTouchStart(e) {
+      var _this$_locks;
+      /**
+       * 因为end事件会合成tap事件的原因，可能会出现
+       * click -> lock -> 执行内部逻辑 ---- 过程中可能会有touchstart事件(identifier: 1) -> unlock -> click完成 -> touchend(identifier: 1) -> 合成了tap -> click(额外的异常点击)
+       * 逻辑层的锁 锁不住视图层的事件监听
+       *
+       * 方案：将在click事件锁住后的所有touchStart保存起来，在tap的时候对比set中是否有相同的序列id，有的话就直接return，并重置set
+       */
+
+      // 只有在锁住的状态下存储 touchStart 的序列值
+      if ((_this$_locks = this._locks) !== null && _this$_locks !== void 0 && _this$_locks['click']) {
+        const touchId = e.touches[0].identifier; // 每个触摸序列的唯一ID
+        // console.log('------1-1--1-1-1-1-:::', touchId)
+        this._excludedTouchStartIdentifier.add(touchId);
+      }
       this.__handleTiggerEvent('touchstart', e);
     },
+    __onTouchMove(e) {
+      this.__handleTiggerEvent('touchmove', e);
+    },
     __onTouchEnd(e) {
+      // console.log('=====2---22-2-2-::::', e.changedTouches[0].identifier)
+
       this.__handleTiggerEvent('touchend', e);
+    },
+    __onTouchCancel(e) {
+      this.__handleTiggerEvent('touchcancel', e);
+    },
+    __onLongPress(e) {
+      this.__handleTiggerEvent('longpress', e);
+    },
+    // 核心触摸事件处理（只保留最常用的）
+    __onClick(e) {
+      var _this$_excludedTouchS, _this$_locks2;
+      Date.now();
+      const eventType = 'click';
+      // console.log('---3----3-3--:::', e.changedTouches[0].identifier)
+      // 对比set中是否有相同的序列id，有的话就直接return，并重置set
+      e.changedTouches[0].identifier;
+      const isExceptiontrigger = (_this$_excludedTouchS = this._excludedTouchStartIdentifier) === null || _this$_excludedTouchS === void 0 ? void 0 : _this$_excludedTouchS.has(e.changedTouches[0].identifier);
+      if (isExceptiontrigger) {
+        this._excludedTouchStartIdentifier.clear();
+        return;
+      }
+
+      // 检查该事件类型是否已加锁，锁住直接return
+      if ((_this$_locks2 = this._locks) !== null && _this$_locks2 !== void 0 && _this$_locks2[eventType]) {
+        // console.log(`[TyAnimated][${now}] ⚠️ 事件被锁拦截: ${eventType}`)
+        return;
+      }
+      // 如果发现click事件需要自动开解锁，在第一次click的时候就自动加上锁
+      if (this.data.__autoLockEvents.includes(eventType)) {
+        this._locks[eventType] = true;
+      }
+      this.__handleTiggerEvent(eventType, e);
     }
   }
 });

package/lib/Animated/native/ty-animated/index.tyml

@@ -2,24 +2,30 @@
   <view
     wx:if="{{__mode==='view'}}"
     id="root"
-    class="container {{__className}} {{customClass}}"
-    style="{{__style}};{{customStyle}}"
+    class="{{__className}}"
+    style="{{__style}}"
     animation="{{__animData}}"
-    bindtap="__onClick"
     bindtouchstart="__onTouchStart"
     bindtouchend="__onTouchEnd"
+    bindtouchmove="__onTouchMove"
+    bindtouchcancel="__onTouchCancel"
+    binglongpress="__onLongPress"
+    bindtap="__onClick"
   >
     <slot></slot>
   </view>
   <text
     wx:else
     id="rootText"
-    class="container {{__className}} {{customClass}}"
-    style="{{__style}};{{customStyle}}"
+    class="container {{__className}}"
+    style="{{__style}}"
     animation="{{__animData}}"
-    bindtap="__onClick"
     bindtouchstart="__onTouchStart"
     bindtouchend="__onTouchEnd"
+    bindtouchmove="__onTouchMove"
+    bindtouchcancel="__onTouchCancel"
+    binglongpress="__onLongPress"
+    bindtap="__onClick"
   >{{__text}}</text>
 </block>