feat: 解决无法修改背景色问题

Author: likecodeboys

packages/mpx-cube-ui/src/components/switch/index.mpx

@@ -3,6 +3,7 @@
     wx:class="{{ switchClass }}"
     bindtap="toggleSwitch"
     animation="{{ switchAnimationData }}"
+    wx:style="{{ swithBGClass }}"
   >
     <view
       class="cube-switch-handle"

packages/mpx-cube-ui/src/components/switch/rn-mixin.ts

@@ -19,16 +19,18 @@ if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
     lifetimes: {
       created() {
         this.ANIMATION_PRESET = {
-          'cube-switch-on': (animationOptions) => {
+          'cube-switch-BGC': (animationOptions) => {
             const animation = this.maskAnimation || (this.maskAnimation = mpx.createAnimation({ ...animationOptions }))
             if (this.isOn) {
-              animation.backgroundColor('#FF6435').step()
+              const onBGC = this.switchOnGBC || '#FF6435'
+              animation.backgroundColor(onBGC).step()
             } else {
-              animation.backgroundColor('#EAEAEA').step()
+              const defaultBGC = this.switchDefaultGBC || '#EAEAEA'
+              animation.backgroundColor(defaultBGC).step()
             }
             this.switchAnimationData = animation.export()
           },
-          'cube-switch-handle-on': (animationOptions) => {
+          'cube-switch-left': (animationOptions) => {
             const animation = this.maskAnimation || (this.maskAnimation = mpx.createAnimation({ ...animationOptions }))
             if (this.isOn) {
               animation.left(18).step()

packages/mpx-cube-ui/src/components/switch/switch.ts

@@ -12,6 +12,14 @@ createComponent({
       type: Boolean,
       value: false
     },
+    switchDefaultGBC: {
+      type: String,
+      value: ''
+    },
+    switchOnGBC: {
+      type: String,
+      value: ''
+    },
     /**
      * @description 是否禁用
      * @optional true/false
@@ -31,6 +39,22 @@ createComponent({
         'cube-switch-on': this.isOn,
         [`cube-switch-${this.themeType}`]: this.themeType
       }
+    },
+    swithBGClass() {
+      if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
+        return {}
+      }
+      if (this.isOn && this.switchOnGBC) {
+        return {
+          backgroundColor: this.switchOnGBC
+        }
+      } else if (!this.isOn && this.switchDefaultGBC) {
+        return {
+          backgroundColor: this.switchDefaultGBC
+        }
+      } else {
+        return {}
+      }
     }
   },
   watch: {