feat: 更新 demo

compiled/alipay/demo/pages/Slider/index.axml

@@ -1,31 +1,31 @@
 <container title="基本使用">
   <slider
-    defaultValue="{{80}}"
+    defaultValue="{{ 80 }}"
     onChange="onChange"
     onAfterChange="onAfterChange" />
 </container>
 
 <container title="无节点双滑块">
   <slider
-    defaultValue="{{[20, 60]}}"
+    defaultValue="{{ [20, 60] }}"
     range
     onChange="onChange"
     onAfterChange="onAfterChange" />
 </container>
 
 <container title="节点单滑块">
   <slider
-    defaultValue="{{60}}"
-    step="{{20}}"
+    defaultValue="{{ 60 }}"
+    step="{{ 20 }}"
     showTicks
     onChange="onChange"
     onAfterChange="onAfterChange" />
 </container>
 
 <container title="有数字节点单滑块">
   <slider
-    defaultValue="{{80}}"
-    step="{{20}}"
+    defaultValue="{{ 80 }}"
+    step="{{ 20 }}"
     showTicks
     showNumber
     onChange="onChange"
@@ -34,8 +34,8 @@
 
 <container title="节点双滑块">
   <slider
-    defaultValue="{{[10, 50]}}"
-    step="{{10}}"
+    defaultValue="{{ [10, 50] }}"
+    step="{{ 10 }}"
     showTicks
     range
     onChange="onChange"
@@ -44,8 +44,8 @@
 
 <container title="有数字节点双滑块">
   <slider
-    defaultValue="{{[10, 50]}}"
-    step="{{10}}"
+    defaultValue="{{ [10, 50] }}"
+    step="{{ 10 }}"
     showTicks
     showNumber
     range
@@ -55,59 +55,64 @@
 
 <container title="在拖动时显示悬浮提示">
   <slider
-    defaultValue="{{80}}"
+    defaultValue="{{ 80 }}"
     showTooltip
     onChange="onChange"
     onAfterChange="onAfterChange" />
 </container>
 
 <container title="受控模式">
   <slider
-    min="{{0}}"
-    max="{{100}}"
-    value="{{value}}"
+    min="{{ 0 }}"
+    max="{{ 100 }}"
+    value="{{ value }}"
     onChange="handleChange" />
   <stepper
-    min="{{0}}"
-    max="{{100}}"
-    value="{{value}}"
+    min="{{ 0 }}"
+    max="{{ 100 }}"
+    value="{{ value }}"
     onChange="handleChange" />
 </container>
 
 <container title="自定义">
   <slider
-    defaultValue="{{80}}"
-    step="{{20}}"
+    defaultValue="{{ 80 }}"
+    step="{{ 20 }}"
     showTooltip
     showTicks
     showNumber
     activeLineStyle="background-color: #ff8f1f"
     activeDotStyle="background-color: red"
     onChange="onChange"
     onAfterChange="onAfterChange">
+    <!-- display: inline -->
     <text
       slot="tick"
-      slot-scope="props">
-      {{props.value}}°C
-    </text>
+      slot-scope="props"
+      >{{ props.value }}</text
+    >
+    <!-- display: inline -->
     <text
       slot="showTooltip"
-      slot-scope="props">
-      {{props.value}}°C
-    </text>
-    <view slot="slider">
+      slot-scope="props"
+      >{{ props.value }}</text
+    >
+
+    <slot name="showTooltip">{{ value }}°C</slot>
+
+    <slot name="slider">
       <view class="custom-slider-handler">
         <icon
           type="SmileOutline"
-          style="color: #ff8f1f"></icon>
+          style="color: #ff8f1f" />
       </view>
-    </view>
+    </slot>
   </slider>
 </container>
 
 <container title="禁用状态">
   <slider
-    defaultValue="{{80}}"
-    disabled="{{true}}"
+    defaultValue="{{ 80 }}"
+    disabled
     onChange="onChange" />
 </container>

compiled/alipay/demo/pages/Slider/index.js

@@ -1,20 +1,20 @@
 Page({
-  data: {
-    value: 80,
-  },
-  onChange(value, e) {
-    console.log('slider changed:', value, e)
-  },
-  onAfterChange(value, e) {
-    console.log('当前值:', value, e);
-    my.showToast({
-      content: `当前选中值为：${value}`
-    });
-  },
-  handleChange(value, e) {
-    console.log('slider changed:', value, e)
-    this.setData({
-      value,
-    });
-  }
+    data: {
+        value: 80,
+    },
+    onChange: function (value, e) {
+        console.log('slider changed:', value, e);
+    },
+    onAfterChange: function (value, e) {
+        console.log('当前值:', value, e);
+        my.showToast({
+            content: "\u5F53\u524D\u9009\u4E2D\u503C\u4E3A\uFF1A".concat(value)
+        });
+    },
+    handleChange: function (value, e) {
+        console.log('slider changed:', value, e);
+        this.setData({
+            value: value,
+        });
+    }
 });