From b2aafcb727352f91ba1f5d09c89caa1014c1e2be Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Sat, 2 Mar 2024 13:59:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(slider):=20=E8=B0=83=E6=95=B4=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=EF=BC=8C=E7=AE=80=E5=8C=96=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/slider-100/slider-100.uvue | 44 +++++-----------------
 1 file changed, 9 insertions(+), 35 deletions(-)

diff --git a/pages/component/slider-100/slider-100.uvue b/pages/component/slider-100/slider-100.uvue
index 7214aa9b..89a040f1 100644
--- a/pages/component/slider-100/slider-100.uvue
+++ b/pages/component/slider-100/slider-100.uvue
@@ -1,23 +1,9 @@
 <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>
-- 
GitLab