slider: 增加浮点例子

96dd2448 · hdx · 3c7ca9e2 · 96dd2448
显示空白变更内容
内联并排

Showing with 133 addition and 201 deletion

pages/component/slider/slider.uvue pages/component/slider/slider.uvue +133 -201

未找到文件。
--- a/pages/component/slider/slider.uvue
+++ b/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
+    <slider :disabled="disabled_boolean" :min="min_input" :max="max_input" :step="step_input" :value="value_input"
-      :disabled="disabled_boolean"
+      :activeColor="activeColor_input" :backgroundColor="backgroundColor_input" :block-size="block_size_input"
-      :min="min_input"
+      :block-color="block_color_input" :show-value="show_value_boolean" @click="slider_click"
-      :max="max_input"
+      @touchstart="slider_touchstart" @touchmove="slider_touchmove" @touchcancel="slider_touchcancel"
-      :step="step_input"
+      @touchend="slider_touchend" @tap="slider_tap" @longpress="slider_longpress" @change="slider_change"
-      :value="value_input"
+      @changing="slider_changing" style="width: 90%"><text>uni-app-x</text></slider>
-      :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
+      <boolean-data :defaultValue="false" title="是否显示当前 value" @change="change_show_value_boolean"></boolean-data>
-        :defaultValue="false"
+      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
-        title="是否显示当前 value"
+      <input-data defaultValue="0" title="slider 最小值" type="number" @confirm="confirm_min_input"></input-data>
-        @change="change_show_value_boolean"
+      <input-data defaultValue="100" title="slider 最大值" type="number" @confirm="confirm_max_input"></input-data>
-      ></boolean-data>
+      <input-data defaultValue="1" title="slider 步长，取值必须大于 0，并且可被(max - min)整除" type="number"
-      <boolean-data
+        @confirm="confirm_step_input"></input-data>
-        :defaultValue="false"
+      <input-data defaultValue="0" title="radio当前取值" type="number" @confirm="confirm_value_input"></input-data>
-        title="是否禁用"
+      <input-data defaultValue="#007aff" title="slider 滑块左侧已选择部分的线条颜色" type="text"
-        @change="change_disabled_boolean"
+        @confirm="confirm_activeColor_input"></input-data>
-      ></boolean-data>
+      <input-data defaultValue="#e9e9e9" title="radio背景条的颜色" type="text"
-      <input-data
+        @confirm="confirm_backgroundColor_input"></input-data>
-        defaultValue="0"
+      <input-data defaultValue="28" title="radio滑块的大小，取值范围为 12 - 28" type="number"
-        title="slider 最小值"
+        @confirm="confirm_block_size_input"></input-data>
-        type="number"
+      <input-data defaultValue="#ffffff" title="滑块颜色" type="text" @confirm="confirm_block_color_input"></input-data>
-        @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
+        <slider @change="sliderChange" :value="100" :min="50" :max="200" :show-value="true" />
-          @change="sliderChange"
-          :value="100"
-          :min="50"
-          :max="200"
-          :show-value="true"
-        />
      </view>
      <view class="uni-title">不同颜色和大小的滑块</view>
      <view>
-        <slider
+        <slider class="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue"
-          class="slider-custom-color-and-size"
+          :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
-          @change="sliderChange"
+          :block-size="sliderBlockSize" />
-          :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