From 96dd24488d6d4c8978aa606890a7b55c7f59bce6 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Tue, 12 Sep 2023 11:32:54 +0800
Subject: [PATCH] =?UTF-8?q?slider:=20=E5=A2=9E=E5=8A=A0=E6=B5=AE=E7=82=B9?=
 =?UTF-8?q?=E4=BE=8B=E5=AD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/slider/slider.uvue | 334 ++++++++++++-----------------
 1 file changed, 133 insertions(+), 201 deletions(-)

diff --git a/pages/component/slider/slider.uvue b/pages/component/slider/slider.uvue
index 04d9136c..885b7626 100644
--- a/pages/component/slider/slider.uvue
+++ b/pages/component/slider/slider.uvue
@@ -1,182 +1,121 @@
 <script>
-export default {
-  data() {
-    return {
-      sliderValue: 50,
-      sliderBlockSize: 20,
-      sliderBackgroundColor: "#000000",
-      sliderActiveColor: "#FFCC33",
-      sliderBlockColor: "#8A6DE9",
-      // 组件属性 autotest
-      show_value_boolean: false,
-      disabled_boolean: false,
-      min_input: 0,
-      max_input: 100,
-      step_input: 1,
-      value_input: 0,
-      activeColor_input: "#007aff",
-      backgroundColor_input: "#e9e9e9",
-      block_size_input: 28,
-      block_color_input: "#ffffff",
-    };
-  },
-  methods: {
-    sliderChange(e: SliderChangeEvent) {
-      console.log("value 发生变化：" + e.detail.value);
-    },
-    slider_click() {
-      console.log("组件被点击时触发");
-    },
-    slider_touchstart() {
-      console.log("手指触摸动作开始");
-    },
-    slider_touchmove() {
-      console.log("手指触摸后移动");
-    },
-    slider_touchcancel() {
-      console.log("手指触摸动作被打断，如来电提醒，弹窗");
-    },
-    slider_touchend() {
-      console.log("手指触摸动作结束");
-    },
-    slider_tap() {
-      console.log("手指触摸后马上离开");
-    },
-    slider_longpress() {
-      console.log(
-        "如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。"
-      );
-    },
-    slider_change() {
-      console.log("完成一次拖动后触发的事件，event.detail = {value: value}");
-    },
-    slider_changing() {
-      console.log("拖动过程中触发的事件，event.detail = {value: value}");
-    },
-    change_show_value_boolean(checked: boolean) {
-      this.show_value_boolean = checked;
-    },
-    change_disabled_boolean(checked: boolean) {
-      this.disabled_boolean = checked;
-    },
-    confirm_min_input(value: number) {
-      this.min_input = value;
-    },
-    confirm_max_input(value: number) {
-      this.max_input = value;
-    },
-    confirm_step_input(value: number) {
-      this.step_input = value;
-    },
-    confirm_value_input(value: number) {
-      this.value_input = value;
-    },
-    confirm_activeColor_input(value: string) {
-      this.activeColor_input = value;
-    },
-    confirm_backgroundColor_input(value: string) {
-      this.backgroundColor_input = value;
-    },
-    confirm_block_size_input(value: number) {
-      this.block_size_input = value;
-    },
-    confirm_block_color_input(value: string) {
-      this.block_color_input = value;
-    },
-  },
-};
+  export default {
+    data() {
+      return {
+        sliderValue: 50,
+        sliderBlockSize: 20,
+        sliderBackgroundColor: "#000000",
+        sliderActiveColor: "#FFCC33",
+        sliderBlockColor: "#8A6DE9",
+        // 组件属性 autotest
+        show_value_boolean: false,
+        disabled_boolean: false,
+        min_input: 0,
+        max_input: 100,
+        step_input: 1,
+        value_input: 0,
+        activeColor_input: "#007aff",
+        backgroundColor_input: "#e9e9e9",
+        block_size_input: 28,
+        block_color_input: "#ffffff",
+      };
+    },
+    methods: {
+      sliderChange(e : SliderChangeEvent) {
+        console.log("value 发生变化：" + e.detail.value);
+      },
+      slider_click() {
+        console.log("组件被点击时触发");
+      },
+      slider_touchstart() {
+        console.log("手指触摸动作开始");
+      },
+      slider_touchmove() {
+        console.log("手指触摸后移动");
+      },
+      slider_touchcancel() {
+        console.log("手指触摸动作被打断，如来电提醒，弹窗");
+      },
+      slider_touchend() {
+        console.log("手指触摸动作结束");
+      },
+      slider_tap() {
+        console.log("手指触摸后马上离开");
+      },
+      slider_longpress() {
+        console.log(
+          "如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。"
+        );
+      },
+      slider_change() {
+        console.log("完成一次拖动后触发的事件，event.detail = {value: value}");
+      },
+      slider_changing() {
+        console.log("拖动过程中触发的事件，event.detail = {value: value}");
+      },
+      change_show_value_boolean(checked : boolean) {
+        this.show_value_boolean = checked;
+      },
+      change_disabled_boolean(checked : boolean) {
+        this.disabled_boolean = checked;
+      },
+      confirm_min_input(value : number) {
+        this.min_input = value;
+      },
+      confirm_max_input(value : number) {
+        this.max_input = value;
+      },
+      confirm_step_input(value : number) {
+        this.step_input = value;
+      },
+      confirm_value_input(value : number) {
+        this.value_input = value;
+      },
+      confirm_activeColor_input(value : string) {
+        this.activeColor_input = value;
+      },
+      confirm_backgroundColor_input(value : string) {
+        this.backgroundColor_input = value;
+      },
+      confirm_block_size_input(value : number) {
+        this.block_size_input = value;
+      },
+      confirm_block_color_input(value : string) {
+        this.block_color_input = value;
+      },
+    },
+  };
 </script>
 
 <template>
   <view class="main">
-    <slider
-      :disabled="disabled_boolean"
-      :min="min_input"
-      :max="max_input"
-      :step="step_input"
-      :value="value_input"
-      :activeColor="activeColor_input"
-      :backgroundColor="backgroundColor_input"
-      :block-size="block_size_input"
-      :block-color="block_color_input"
-      :show-value="show_value_boolean"
-      @click="slider_click"
-      @touchstart="slider_touchstart"
-      @touchmove="slider_touchmove"
-      @touchcancel="slider_touchcancel"
-      @touchend="slider_touchend"
-      @tap="slider_tap"
-      @longpress="slider_longpress"
-      @change="slider_change"
-      @changing="slider_changing"
-      style="width: 90%"
-      ><text>uni-app-x</text></slider
-    >
+    <slider :disabled="disabled_boolean" :min="min_input" :max="max_input" :step="step_input" :value="value_input"
+      :activeColor="activeColor_input" :backgroundColor="backgroundColor_input" :block-size="block_size_input"
+      :block-color="block_color_input" :show-value="show_value_boolean" @click="slider_click"
+      @touchstart="slider_touchstart" @touchmove="slider_touchmove" @touchcancel="slider_touchcancel"
+      @touchend="slider_touchend" @tap="slider_tap" @longpress="slider_longpress" @change="slider_change"
+      @changing="slider_changing" style="width: 90%"><text>uni-app-x</text></slider>
   </view>
 
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
-    <!-- #endif -->
+  <!-- #endif -->
     <view class="content nvue">
       <page-head title="组件属性"></page-head>
-      <boolean-data
-        :defaultValue="false"
-        title="是否显示当前 value"
-        @change="change_show_value_boolean"
-      ></boolean-data>
-      <boolean-data
-        :defaultValue="false"
-        title="是否禁用"
-        @change="change_disabled_boolean"
-      ></boolean-data>
-      <input-data
-        defaultValue="0"
-        title="slider 最小值"
-        type="number"
-        @confirm="confirm_min_input"
-      ></input-data>
-      <input-data
-        defaultValue="100"
-        title="slider 最大值"
-        type="number"
-        @confirm="confirm_max_input"
-      ></input-data>
-      <input-data
-        defaultValue="1"
-        title="slider 步长，取值必须大于 0，并且可被(max - min)整除"
-        type="number"
-        @confirm="confirm_step_input"
-      ></input-data>
-      <input-data
-        defaultValue="0"
-        title="radio当前取值"
-        type="number"
-        @confirm="confirm_value_input"
-      ></input-data>
-      <input-data
-        defaultValue="#007aff"
-        title="slider 滑块左侧已选择部分的线条颜色"
-        type="text"
-        @confirm="confirm_activeColor_input"
-      ></input-data>
-      <input-data
-        defaultValue="#e9e9e9"
-        title="radio背景条的颜色"
-        type="text"
-        @confirm="confirm_backgroundColor_input"
-      ></input-data>
-      <input-data
-        defaultValue="28"
-        title="radio滑块的大小，取值范围为 12 - 28"
-        type="number"
-        @confirm="confirm_block_size_input"
-      ></input-data>
-      <input-data
-        defaultValue="#ffffff"
-        title="滑块颜色"
-        type="text"
-        @confirm="confirm_block_color_input"
-      ></input-data>
+      <boolean-data :defaultValue="false" title="是否显示当前 value" @change="change_show_value_boolean"></boolean-data>
+      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+      <input-data defaultValue="0" title="slider 最小值" type="number" @confirm="confirm_min_input"></input-data>
+      <input-data defaultValue="100" title="slider 最大值" type="number" @confirm="confirm_max_input"></input-data>
+      <input-data defaultValue="1" title="slider 步长，取值必须大于 0，并且可被(max - min)整除" type="number"
+        @confirm="confirm_step_input"></input-data>
+      <input-data defaultValue="0" title="radio当前取值" type="number" @confirm="confirm_value_input"></input-data>
+      <input-data defaultValue="#007aff" title="slider 滑块左侧已选择部分的线条颜色" type="text"
+        @confirm="confirm_activeColor_input"></input-data>
+      <input-data defaultValue="#e9e9e9" title="radio背景条的颜色" type="text"
+        @confirm="confirm_backgroundColor_input"></input-data>
+      <input-data defaultValue="28" title="radio滑块的大小，取值范围为 12 - 28" type="number"
+        @confirm="confirm_block_size_input"></input-data>
+      <input-data defaultValue="#ffffff" title="滑块颜色" type="text" @confirm="confirm_block_color_input"></input-data>
     </view>
 
     <view class="uni-padding-wrap">
@@ -195,51 +134,44 @@ export default {
         <slider @change="sliderChange" :value="60" :step="10" />
       </view>
 
+      <view class="uni-title">浮点步进:step=0.01跳动</view>
+      <view>
+        <slider :value="0.5" :min="0" :max="1" :step="0.01" :show-value="true" />
+      </view>
+
       <view class="uni-title">设置最小/最大值</view>
       <view>
-        <slider
-          @change="sliderChange"
-          :value="100"
-          :min="50"
-          :max="200"
-          :show-value="true"
-        />
+        <slider @change="sliderChange" :value="100" :min="50" :max="200" :show-value="true" />
       </view>
 
       <view class="uni-title">不同颜色和大小的滑块</view>
       <view>
-        <slider
-          class="slider-custom-color-and-size"
-          @change="sliderChange"
-          :value="sliderValue"
-          :backgroundColor="sliderBackgroundColor"
-          :activeColor="sliderActiveColor"
-          :blockColor="sliderBlockColor"
-          :block-size="sliderBlockSize"
-        />
+        <slider class="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue"
+          :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
+          :block-size="sliderBlockSize" />
       </view>
     </view>
-    <!-- #ifdef APP -->
+  <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 
 <style>
-.main {
-  max-height: 500rpx;
-  padding: 10rpx 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  flex-direction: row;
-  justify-content: center;
-}
+  .main {
+    max-height: 500rpx;
+    padding: 10rpx 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    flex-direction: row;
+    justify-content: center;
+  }
 
-.main .list-item {
-  width: 100%;
-  height: 200rpx;
-  border: 1px solid #666;
-}
+  .main .list-item {
+    width: 100%;
+    height: 200rpx;
+    border: 1px solid #666;
+  }
 
-.m-l-a {
-  margin-left: auto;
-}
-</style>
+  .m-l-a {
+    margin-left: auto;
+  }
+</style>
\ No newline at end of file
-- 
GitLab