feat:添加按钮点击效果

miniprogram/ui/button/button.less

@@ -22,6 +22,11 @@
             background: rgba(255, 215, 25, 0.5);
             box-shadow: 0px 10rpx 4rpx rgba(219, 185, 23, 0.5);
         }
+
+        &.active {
+            transform: translateY(10rpx);
+            box-shadow: 0 0 0 rgba(219, 185, 23, 0.5); /* 阴影效果 */
+        }
     }
 
     &--green {
@@ -32,10 +37,16 @@
             background: rgba(147, 211, 51, 0.5);
             box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 0.5);
         }
+
+        &.active {
+            transform: translateY(10rpx);
+            box-shadow: 0 0 0 rgba(121, 185, 21, 0.5); /* 阴影效果 */
+        }
     }
 
     .loading-class,
     &__icon {
         margin-right: 24rpx;
     }
+    
 }

miniprogram/ui/button/button.wxml

@@ -1,7 +1,12 @@
 <wxs src="../wxs/base.wxs" module="Utils" />
+<wxs module="wxs" src="./button.wxs"></wxs>
+<!-- <view class="keyboard" bind:touchstart="{{wxs.keypadTouchStart}}" bind:touchend="{{wxs.keypadTouchEnd}}"> -->
 
 <button
+    data-id="test-toy-button-id"
     class="toy-button toy-button--{{type}} {{ disabled ? 'toy-button--disabled' : '' }} {{Utils.classNames({disabled: disabled, loading: loading })}}"
+    data-disabled="{{disabled}}"
+    data-loading="{{loading}}"
     style="{{style}};{{width ? 'width:' + width + ';' : ''}};{{height ? 'height:' + height + ';' : ''}}"
     session-from="{{ sessionFrom }}"
     send-message-title="{{ sendMessageTitle }}"
@@ -10,7 +15,9 @@
     show-message-card="{{ showMessageCard }}"
     app-parameter="{{ appParameter }}"
     aria-label="{{ ariaLabel }}"
-    bindtap="{{ disabled || loading ? '' : 'onClick' }}"
+    bind:touchstart="{{wxs.touchStart}}"
+    bind:touchend="{{wxs.touchEnd}}"
+    bind:tap="{{ disabled || loading ? '' : 'onClick'}}"
     bindgetuserinfo="onGetUserInfo"
     bindcontact="onContact"
     bindgetphonenumber="onGetPhoneNumber"

miniprogram/ui/button/button.wxs

@@ -0,0 +1,23 @@
+module.exports = {
+    touchStart: function (event, ownerInstance) {
+        var instance = event.instance;
+        var dataSet = instance.getDataset();
+        var disabled = dataSet.disabled;
+        var loading = dataSet.loading;
+
+        if (instance && !disabled && !loading) {
+            instance.addClass('active')
+        }
+    },
+
+    touchEnd: function (event, ownerInstance) {
+        var instance = event.instance
+        var dataSet = instance.getDataset();
+        var disabled = dataSet.disabled;
+        var loading = dataSet.loading;
+        
+        if (instance && !disabled && !loading) {
+            instance.removeClass('active')
+        }
+    },
+};