scroll-view-props: 重构样式

pages/component/scroll-view/scroll-view-refresher-props.uvue

@@ -13,49 +13,44 @@
       </scroll-view>
     </view>
 
-    <scroll-view class="uni-list" showScrollbar="true">
-      <view class="uni-common-pb"></view>
-      <text style="font-size: 12px;text-align: center;color: red; ">**下拉刷新的属性设置需要先打开下拉刷新开关**</text>
-      <view class="uni-common-pb"></view>
-      <view class="uni-option">
+    <scroll-view class="uni-list" :showScrollbar="true">
+      <view class="uni-list-cell-padding">
+        <text class="refresher-tips">**下拉刷新的属性设置需要先打开下拉刷新开关**</text>
+      </view>
+      <view class="uni-list-cell uni-list-cell-padding">
         <text>是否开启下拉刷新</text>
         <switch :checked="refresherEnabled" @change="handleTrunOnRefresher"></switch>
       </view>
-      <view class="uni-option">
+      <view class="uni-list-cell uni-list-cell-padding">
         <text>设置下拉刷新状态</text>
         <switch :disabled="!refresherEnabled" :checked="refresherTriggered"
           @change="refresherTriggered=!refresherTriggered"></switch>
       </view>
 
-      <view class="uni-option">
+      <view class="uni-list-cell uni-list-cell-padding">
         <text>设置下拉刷新阈值</text>
-        <input style="width: 50px;border-width: 1px;text-align: center;  border-style: solid;"
-          :disabled="!refresherEnabled" :value="refresherThreshold" type="number"
+        <input class="uni-list-cell-input" :disabled="!refresherEnabled" :value="refresherThreshold" type="number"
           @input="handleRefresherThresholdInput" />
       </view>
 
-      <view class="uni-option">
+      <view class="uni-list-cell uni-list-cell-padding">
         <text>设置下拉刷新区域背景颜色</text>
-        <input style="width: 100px;border-width: 1px;text-align: center; border-style: solid;"
-          :disabled="!refresherEnabled" :value="refresherBackground" @input="handleRefresherBackground" />
+        <input class="uni-list-cell-input" :disabled="!refresherEnabled" :value="refresherBackground"
+          @input="handleRefresherBackground" />
       </view>
 
-      <view style="height: 100px;padding: 10px; ">
+      <view class="uni-list-cell-padding">
         <text>设置下拉刷新默认样式</text>
-        <view class="uni-common-pb"></view>
-        <view style="flex-direction: row;">
-          <button style="padding: 5rpx; margin-right: 5px;" type="primary" size="mini"
+        <view class="switch-refresher-group">
+          <button class="switch-refresher-style" type="primary" size="mini"
             @click="refresherDefaultStyle = `none`">none</button>
-          <button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
+          <button class="switch-refresher-style" type="primary" size="mini"
             @click="refresherDefaultStyle = `black`">black</button>
-          <button style="padding: 5rpx;" type="primary" size="mini"
+          <button class="switch-refresher-style" type="primary" size="mini"
             @click="refresherDefaultStyle = `white`">white</button>
         </view>
       </view>
-
-      <view class="uni-common-pb"></view>
     </scroll-view>
-
   </view>
 </template>
 
@@ -130,8 +125,7 @@
 <style>
   .uni-margin-wrap {
     height: 200px;
-    margin-left: 25px;
-    margin-right: 25px;
+    margin: 0 25px 25px 25px;
   }
 
   .item {
@@ -145,6 +139,12 @@
     border-color: chocolate;
   }
 
+  .refresher-tips {
+    font-size: 12px;
+    text-align: center;
+    color: red;
+  }
+
   .uni-text {
     color: black;
     font-size: 50px;
@@ -152,15 +152,12 @@
 
   .uni-list {
     flex: 1;
-    margin: 25px 25px 0 25px;
   }
 
-  .uni-option {
-    height: 50px;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
+  .uni-list-cell-input {
+    max-width: 100px;
+    border: 1px solid #ccc;
+    text-align: center;
   }
 
   .picker-view {
@@ -168,4 +165,14 @@
     height: 320px;
     margin-top: 10px;
   }
+
+  .switch-refresher-group {
+    flex-direction: row;
+    margin-top: 5px;
+  }
+
+  .switch-refresher-style {
+    padding: 2px 10px;
+    margin-right: 5px;
+  }
 </style>