fix: 条件编译

Author: WeilinerL

packages/mpx-cube-ui/src/components/slider/css.rn.styl

@@ -5,7 +5,6 @@
   position: relative
   display: flex
   align-items: center
-  background: blue
 
 .cube-slider-tab-area
   flex: 1 0 auto

packages/mpx-cube-ui/src/components/slider/gesture.tsx

@@ -1,7 +1,7 @@
 import { View } from 'react-native'
+import { runOnJS } from 'react-native-reanimated'
 import { createElement, useMemo, Children } from 'react'
 import { GestureDetector, Gesture } from 'react-native-gesture-handler'
-import { runOnJS } from 'react-native-reanimated';
 
 const Slider = ({
   ontouchstart,

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

@@ -1,9 +1,10 @@
 <template>
   <view
     wx:class="{{ sliderClass }}"
-    wx:style="{{ { ...containerStyle, ...tabAreaStyle } }}"
+    wx:style="{{ containerStyle }}"
   >
     <gesture
+      wx:if="{{ __mpx_mode__ === 'android' || __mpx_mode__ === 'ios' || __mpx_mode__ === 'harmony' }}"
       ontouchstart="{{startHandler}}"
       ontouchmove="{{moveHandler}}"
       ontonouchend="{{endHandler}}"
@@ -35,6 +36,36 @@
         </view>
       </view>
     </gesture>
+    <view
+      wx:ref
+      wx:else
+      class="cube-slider-tab-area"
+      wx:style="{{ tabAreaStyle }}"
+      bind:tap="onClick"
+    >
+      <!-- 滑块儿容器 -->
+      <view
+        class="cube-slider-handle"
+        wx:style="{{ handleStyle }}"
+        capture-catch:touchstart="startHandler"
+        capture-catch:touchmove="moveHandler"
+        capture-catch:touchend="endHandler"
+      >
+        <!-- 滑块儿 -->
+        <view class="cube-slider-thumb-custom" wx:style="{{ { display: customContent ? '' : 'none', ...thumbStyle } }}">
+          <!-- 自定义滑块儿 -->
+          <slot></slot>
+        </view>
+        <view
+          wx:if="{{!customContent}}"
+          class="cube-slider-thumb"
+          wx:style="{{ thumbStyle }}"
+        ></view>
+      </view>
+      <view class="cube-slider-track" wx:style="{{ trackStyle }}">
+        <view class="cube-slider-step" wx:style="{{ stepStyle }}"></view>
+      </view>
+    </view>
     <view wx:if="{{ showValueLable }}" class="cube-slider-value">
       <text
         numberOfLines@_ios|_android|_harmony="{{1}}"
@@ -54,12 +85,20 @@
 /* @mpx-endif */
 </style>
 
-<script type="application/json">
-  {
+<script name="json">
+  const isNative = __mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'harmony'
+  const base = {
     "styleIsolation": "shared",
-    "component": true,
-    "usingComponents": {
-      "gesture": "./gesture.tsx"
+    "component": true
+  }
+  if (isNative) {
+    module.exports = {
+      ...base,
+      "usingComponents": {
+        "gesture": "./gesture.tsx"
+      }
     }
+  } else {
+    module.exports = base
   }
 </script>

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

@@ -139,10 +139,18 @@ createComponent({
       return this['show-value'] || this.showValue
     },
     containerStyle() {
-      return {
+      const baseStyle = {
         marginLeft: `${this._blockSize / 2 + 4}px`,
         marginRight: `${this._blockSize / 2 + 4}px`
       }
+      const isNative = __mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'harmony'
+      if (isNative) {
+        return {
+          ...baseStyle,
+          ...this.tabAreaStyle
+        }
+      }
+      return baseStyle
     },
     tabAreaStyle() {
       const minH = Math.max(12, this._blockSize) / 2