From a741ffa1a2108cbd080a8dd267815f111616c1c6 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Fri, 25 Aug 2023 15:19:29 +0800
Subject: [PATCH] =?UTF-8?q?slider:=20=E5=A2=9E=E5=8A=A0=20step=200=20~=201?=
 =?UTF-8?q?00=20=E5=88=BB=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/slider/slider.uvue | 223 +++++++++++++++--------------
 1 file changed, 115 insertions(+), 108 deletions(-)

diff --git a/pages/component/slider/slider.uvue b/pages/component/slider/slider.uvue
index 541ed90b..9fb05084 100644
--- a/pages/component/slider/slider.uvue
+++ b/pages/component/slider/slider.uvue
@@ -1,125 +1,132 @@
 <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: {
+  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 }
-		}
-	}
+      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>
-	<!-- #ifdef APP -->
-	<scroll-view style="flex:1">
-		<!-- #endif -->
-	<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>
-	</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex:1">
+    <!-- #endif -->
+    <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>
+    </view>
 
-		<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>
-		</view>
+    <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>
+    </view>
 
+    <view class="uni-padding-wrap">
+      <page-head title="默认及使用"></page-head>
+      <view class="uni-title">显示当前value</view>
+      <view>
+        <slider @change="sliderChange" :value="50" :show-value="true" />
+      </view>
 
-		<view class="uni-padding-wrap">
-			<page-head title="默认及使用"></page-head>
-			<view class="uni-title">显示当前value</view>
-			<view>
-				<slider @change="sliderChange" :value="50" :show-value="true" />
-			</view>
+      <view class="uni-title">设置步进:step=5跳动</view>
+      <view>
+        <view class="uni-row">
+          <text>0</text>
+          <text class="m-l-a">100</text>
+        </view>
+        <slider @change="sliderChange" :value="60" :step="5" />
+      </view>
 
-			<view class="uni-title">设置步进step跳动</view>
-			<view>
-				<slider @change="sliderChange" :value="60" :step="5" />
-			</view>
+      <view class="uni-title">设置最小/最大值</view>
+      <view>
+        <slider @change="sliderChange" :value="100" :min="50" :max="200" :show-value="true" />
+      </view>
 
-			<view class="uni-title">设置最小/最大值</view>
-			<view>
-				<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" />
-			</view>
-		</view>
-		<!-- #ifdef APP -->
-	</scroll-view>
-	<!-- #endif -->
+      <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" />
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
 <style>
-	.main {
-		max-height: 500rpx;
-		padding: 10rpx 0;
-		border-bottom: 1px solid rgba(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, .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>
\ No newline at end of file
-- 
GitLab