slider: 增加浮点例子

pages/component/slider/slider.uvue

 <script>
-export default {
+  export default {
     data() {
       return {
         sliderValue: 50,
@@ -21,7 +21,7 @@ export default {
       };
     },
     methods: {
-    sliderChange(e: SliderChangeEvent) {
+      sliderChange(e : SliderChangeEvent) {
         console.log("value 发生变化：" + e.detail.value);
       },
       slider_click() {
@@ -53,65 +53,48 @@ export default {
       slider_changing() {
         console.log("拖动过程中触发的事件，event.detail = {value: value}");
       },
-    change_show_value_boolean(checked: boolean) {
+      change_show_value_boolean(checked : boolean) {
         this.show_value_boolean = checked;
       },
-    change_disabled_boolean(checked: boolean) {
+      change_disabled_boolean(checked : boolean) {
         this.disabled_boolean = checked;
       },
-    confirm_min_input(value: number) {
+      confirm_min_input(value : number) {
         this.min_input = value;
       },
-    confirm_max_input(value: number) {
+      confirm_max_input(value : number) {
         this.max_input = value;
       },
-    confirm_step_input(value: number) {
+      confirm_step_input(value : number) {
         this.step_input = value;
       },
-    confirm_value_input(value: number) {
+      confirm_value_input(value : number) {
         this.value_input = value;
       },
-    confirm_activeColor_input(value: string) {
+      confirm_activeColor_input(value : string) {
         this.activeColor_input = value;
       },
-    confirm_backgroundColor_input(value: string) {
+      confirm_backgroundColor_input(value : string) {
         this.backgroundColor_input = value;
       },
-    confirm_block_size_input(value: number) {
+      confirm_block_size_input(value : number) {
         this.block_size_input = value;
       },
-    confirm_block_color_input(value: string) {
+      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 -->
@@ -119,64 +102,20 @@ export default {
   <!-- #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,28 +134,21 @@ 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 -->
@@ -225,21 +157,21 @@ export default {
 </template>
 
 <style>
-.main {
+  .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 {
+  .main .list-item {
     width: 100%;
     height: 200rpx;
     border: 1px solid #666;
-}
+  }
 
-.m-l-a {
+  .m-l-a {
     margin-left: auto;
-}
+  }
 </style>
\ No newline at end of file