feat(slider): 调整布局，简化排版

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

 <template>
   <scroll-view class="page">
     <page-head :title="title"></page-head>
-    <view class="flex-row">
-      <view class="flex-fill">
-        <slider ref="slider1" v-for="(_, index1) in 25" :key="index1" class="slider" @changing="sliderChanging"
-          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
-      </view>
-      <view class="flex-fill">
-        <slider ref="slider2" v-for="(_, index2) in 25" :key="index2" class="slider" @changing="sliderChanging"
-          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
-      </view>
-      <view class="flex-fill">
-        <slider ref="slider3" v-for="(_, index3) in 25" :key="index3" class="slider" @changing="sliderChanging"
-          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
-      </view>
-      <view class="flex-fill">
-        <slider ref="slider4" v-for="(_, index4) in 25" :key="index4" class="slider" @changing="sliderChanging"
-          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
-      </view>
+    <view class="grid-view">
+      <slider ref="slider" class="slider" v-for="(_, index) in 100" :key="index" @changing="sliderChanging"
+        @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
     </view>
   </scroll-view>
 </template>
@@ -38,19 +24,8 @@
         this.updateSliderValue(e.detail.value)
       },
       updateSliderValue(value : number) {
-        // this.sliderValue = value
-
         // TODO 跳过vue框架，直接修改原生组件
-        (this.$refs["slider1"] as UniSliderElement[]).forEach((item) => {
-          item.value = value
-        });
-        (this.$refs["slider2"] as UniSliderElement[]).forEach((item) => {
-          item.value = value
-        });
-        (this.$refs["slider3"] as UniSliderElement[]).forEach((item) => {
-          item.value = value
-        });
-        (this.$refs["slider4"] as UniSliderElement[]).forEach((item) => {
+        (this.$refs["slider"] as UniSliderElement[]).forEach((item) => {
           item.value = value
         });
       }
@@ -63,15 +38,14 @@
     flex: 1;
   }
 
-  .flex-row {
+  .grid-view {
     flex-direction: row;
-  }
-
-  .flex-fill {
-    flex: 1;
+    flex-wrap: wrap;
   }
 
   .slider {
-    margin: 1px 0.5px;
+    width: 25%;
+    margin-top: 1px;
+    margin-bottom: 1px;
   }
 </style>