wip: slider-100

pages/component/slider-100/slider-100.uvue

 <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"
-      />
+    <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"
-          />
+        <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"
-          />
+        <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"
-          />
+        <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>
+        <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,16 +26,13 @@
   <!-- #endif -->
 </template>
 
-<script lang="ts">
-export default {
+<script>
+  export default {
     data() {
       return {
         title: 'slider 滑块 x 100',
         sliderValue: 50,
-      sliderBlockSize: 20,
-      sliderBackgroundColor: '#000000',
-      sliderActiveColor: '#FFCC33',
-      sliderBlockColor: '#8A6DE9',
+        sliderBlockSize: 20
       }
     },
     methods: {
@@ -81,24 +40,28 @@ export default {
         this.sliderValue = e.detail.value
       },
     },
-}
+  }
 </script>
 
 <style>
-.flex-row {
+  .page {
+    flex: 1;
+  }
+
+  .flex-row {
     flex-direction: row;
-}
+  }
 
-.flex-fill {
+  .flex-fill {
     flex: 1;
-}
+  }
 
-.first-slider {
+  .first-slider {
     margin: 12px 0;
     background-color: rgba(0, 0, 0, 0.1);
-}
+  }
 
-.slider {
+  .slider {
     margin: 2px 0.5px;
-}
+  }
 </style>
\ No newline at end of file