From e085f32346baea5ca6eb0539f3ca8ffdb39be84d Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Mon, 14 Aug 2023 18:54:57 +0800
Subject: [PATCH] wip: slider-100

---
 pages/component/slider-100/slider-100.uvue | 137 ++++++++-------------
 1 file changed, 50 insertions(+), 87 deletions(-)

diff --git a/pages/component/slider-100/slider-100.uvue b/pages/component/slider-100/slider-100.uvue
index eb0922c3..e7885d05 100644
--- a/pages/component/slider-100/slider-100.uvue
+++ b/pages/component/slider-100/slider-100.uvue
@@ -1,62 +1,24 @@
 <template>
   <!-- #ifdef APP -->
-  <scroll-view style="flex: 1">
+  <scroll-view class="page">
     <!-- #endif -->
-    <view class="uni-padding-wrap">
-      <slider
-        class="first-slider"
-        @changing="sliderChanging"
-        :value="sliderValue"
-        :backgroundColor="sliderBackgroundColor"
-        :activeColor="sliderActiveColor"
-        :blockColor="sliderBlockColor"
-        :show-value="true"
-      />
-      <view class="flex-row">
-        <view class="flex-fill">
-          <slider
-            v-for="(_, index1) in 25"
-            :key="index1"
-            class="slider"
-            @changing="sliderChanging"
-            :value="sliderValue"
-            :block-size="sliderBlockSize"
-            :show-value="true"
-          />
-        </view>
-        <view class="flex-fill">
-          <slider
-            v-for="(_, index2) in 25"
-            :key="index2"
-            class="slider"
-            @changing="sliderChanging"
-            :value="sliderValue"
-            :block-size="sliderBlockSize"
-            :show-value="true"
-          />
-        </view>
-        <view class="flex-fill">
-          <slider
-            v-for="(_, index3) in 25"
-            :key="index3"
-            class="slider"
-            @changing="sliderChanging"
-            :value="sliderValue"
-            :block-size="sliderBlockSize"
-            :show-value="true"
-          />
-        </view>
-        <view class="flex-fill">
-          <slider
-            v-for="(_, index4) in 25"
-            :key="index4"
-            class="slider"
-            @changing="sliderChanging"
-            :value="sliderValue"
-            :block-size="sliderBlockSize"
-            :show-value="true"
-          />
-        </view>
+    <page-head :title="title"></page-head>
+    <view class="flex-row">
+      <view class="flex-fill">
+        <slider v-for="(_, index1) in 25" :key="index1" class="slider" @changing="sliderChanging" :value="sliderValue"
+          :block-size="sliderBlockSize" :show-value="true" />
+      </view>
+      <view class="flex-fill">
+        <slider v-for="(_, index2) in 25" :key="index2" class="slider" @changing="sliderChanging" :value="sliderValue"
+          :block-size="sliderBlockSize" :show-value="true" />
+      </view>
+      <view class="flex-fill">
+        <slider v-for="(_, index3) in 25" :key="index3" class="slider" @changing="sliderChanging" :value="sliderValue"
+          :block-size="sliderBlockSize" :show-value="true" />
+      </view>
+      <view class="flex-fill">
+        <slider v-for="(_, index4) in 25" :key="index4" class="slider" @changing="sliderChanging" :value="sliderValue"
+          :block-size="sliderBlockSize" :show-value="true" />
       </view>
     </view>
     <!-- #ifdef APP -->
@@ -64,41 +26,42 @@
   <!-- #endif -->
 </template>
 
-<script lang="ts">
-export default {
-  data() {
-    return {
-      title: 'slider 滑块 x 100',
-      sliderValue: 50,
-      sliderBlockSize: 20,
-      sliderBackgroundColor: '#000000',
-      sliderActiveColor: '#FFCC33',
-      sliderBlockColor: '#8A6DE9',
-    }
-  },
-  methods: {
-    sliderChanging(e: SliderChangeEvent) {
-      this.sliderValue = e.detail.value
+<script>
+  export default {
+    data() {
+      return {
+        title: 'slider 滑块 x 100',
+        sliderValue: 50,
+        sliderBlockSize: 20
+      }
     },
-  },
-}
+    methods: {
+      sliderChanging(e: SliderChangeEvent) {
+        this.sliderValue = e.detail.value
+      },
+    },
+  }
 </script>
 
 <style>
-.flex-row {
-  flex-direction: row;
-}
+  .page {
+    flex: 1;
+  }
+
+  .flex-row {
+    flex-direction: row;
+  }
 
-.flex-fill {
-  flex: 1;
-}
+  .flex-fill {
+    flex: 1;
+  }
 
-.first-slider {
-  margin: 12px 0;
-  background-color: rgba(0, 0, 0, 0.1);
-}
+  .first-slider {
+    margin: 12px 0;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
 
-.slider {
-  margin: 2px 0.5px;
-}
-</style>
+  .slider {
+    margin: 2px 0.5px;
+  }
+</style>
\ No newline at end of file
-- 
GitLab