Merge pull request #200 from anlyyao/slider

fix(slider): fix style related
Tencent · Mar 4, 2022 · abfe985 · abfe985
2 parents 1139839 + 45820c1
commit abfe985
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 42 deletions.
diff --git a/example/pages/slider/slider.less b/example/pages/slider/slider.less
@@ -45,7 +45,7 @@ page {
   &-desc {
     margin: 32rpx;
     color: rgba(0, 0, 0, .4);
-    font-size: 26rpx;
+    font-size: 24rpx;
     line-height: 36rpx;
     white-space: pre-line;
   }
@@ -66,10 +66,6 @@ page {
   flex-grow: 1;
 }
 
-.space-left {
-  padding-left: 16rpx;
-}
-
-.space {
-  padding: 0 16rpx;
+.t-slider__mark {
+  margin: 0 12rpx;
 }
diff --git a/example/pages/slider/slider.ts b/example/pages/slider/slider.ts
@@ -3,7 +3,7 @@ Page({
     value: 40,
     value1: 10,
     value2: 10,
-    value3: 10,
+    value3: 50,
     valueStep: 24,
     valueRange: [],
     valueRange2: [],
@@ -18,6 +18,10 @@ Page({
       50: '中',
       100: '大',
     },
+    /** 滑动条的颜色 */
+    colors: ['#0052D9', '#E7E7E7'],
+    /** 禁用状态滑动条的颜色） */
+    disabledColor: ['#BBD3FB', '#E7E7E7'],
   },
   handleChange(e) {
     this.setData({

diff --git a/example/pages/slider/slider.wxml b/example/pages/slider/slider.wxml
@@ -1,19 +1,24 @@
 <view class="t-slider-title">Slider 滑动选择器</view>
 <view class="t-slider-desc">用于选择横轴上的数值、区间、档位。</view>
 <t-demo title="01 类型" desc="基础滑动选择器">
-  <view class="space">
-    <t-slider defaultValue="0" />
+  <view>
+    <t-slider defaultValue="60" colors="{{colors}}" />
   </view>
   <view class="t-slider-wrapper-desc">带数值滑动选择器</view>
-  <view class="space-left">
-    <t-slider value="{{value3}}" bind:change="handleChange" label="${value}%"></t-slider>
+  <view>
+    <t-slider
+      value="{{value3}}"
+      bind:change="handleChange"
+      label="${value}"
+      colors="{{colors}}"
+    ></t-slider>
   </view>
   <view class="t-slider-wrapper-desc">起始非零滑动选择器</view>
-  <view class="space-left">
-    <t-slider defaultValue="30" min="{{30}}" max="{{200}}" label></t-slider>
+  <view>
+    <t-slider defaultValue="30" min="{{30}}" max="{{200}}" label colors="{{colors}}"></t-slider>
   </view>
   <view class="t-slider-wrapper-desc">带刻度滑动选择器</view>
-  <view class="space">
+  <view class="t-slider__mark">
     <t-slider
       marks="{{mask3}}"
       step="{{50}}"
@@ -22,15 +27,38 @@
     ></t-slider>
   </view>
   <view class="t-slider-wrapper-desc">区间滑动选择器</view>
-  <t-slider range label showExtremeValue defaultValue="{{[30, 70]}}"></t-slider>
+  <t-slider range label showExtremeValue defaultValue="{{[30, 70]}}" colors="{{colors}}"></t-slider>
 </t-demo>
-<t-demo title="02 状态" desc="滑动选择器禁用状态">
-  <view class="space-container">
-    <t-slider disabled value="{{60}}" label></t-slider>
+<t-demo title="02 状态" desc="基础滑动选择器">
+  <view>
+    <t-slider disabled value="{{60}}" disabledColor="{{disabledColor}}" />
   </view>
+  <view class="t-slider-wrapper-desc">带数值滑动选择器</view>
   <view class="space-container">
-    <t-slider disabled value="{{50}}" marks="{{mask3}}"></t-slider>
+    <t-slider disabled value="{{50}}" label disabledColor="{{disabledColor}}"></t-slider>
+  </view>
+  <view class="t-slider-wrapper-desc">起始非零滑动选择器</view>
+  <view>
+    <t-slider
+      disabled
+      value="{{30}}"
+      min="{{30}}"
+      max="{{200}}"
+      label
+      disabledColor="{{disabledColor}}"
+    ></t-slider>
   </view>
+  <view class="t-slider-wrapper-desc">带刻度滑动选择器</view>
+  <view class="t-slider__mark">
+    <t-slider
+      disabled
+      marks="{{mask3}}"
+      step="{{50}}"
+      value="{{50}}"
+      disabledColor="{{disabledColor}}"
+    ></t-slider>
+  </view>
+  <view class="t-slider-wrapper-desc">区间滑动选择器</view>
   <view class="space-container">
     <t-slider
       disabled
@@ -44,14 +72,14 @@
 </t-demo>
 <t-demo title="03 规格" desc="无标题滑动选择器">
   <view class="space-container">
-    <view class="space">
-      <t-slider />
+    <view>
+      <t-slider defaultValue="50" colors="{{colors}}" />
     </view>
   </view>
 </t-demo>
 <t-demo desc="有标题滑动选择器">
   <view class="space-container label">
     <view>选择器标题</view>
-    <t-slider class="label-class" />
+    <t-slider class="label-class" defaultValue="50" colors="{{colors}}" />
   </view>
 </t-demo>
diff --git a/src/slider/slider.less b/src/slider/slider.less
@@ -3,6 +3,7 @@
 @bar-height: 2rpx;
 @block-color: #fff;
 @block-size: 16px;
+@dot-color: #0052d9;
 
 .@{prefix}-slider__container {
   font-size: 14px;
@@ -14,15 +15,15 @@
   .@{prefix}-slider__value,
   .@{prefix}-slider__range-extreme,
   .@{prefix}-slider__dot-value {
-    color: rgba(0, 0, 0, 0.4);
+    color: rgba(0, 0, 0, .9);
   }
 
   &.@{prefix}-is-disabled {
     .@{prefix}-slider__value,
     .@{prefix}-slider__range-extreme,
     .@{prefix}-slider__dot-value,
     .@{prefix}-slider__scale-desc {
-      color: rgba(0, 0, 0, 0.26);
+      color: rgba(0, 0, 0, .4);
     }
   }
 }
@@ -52,7 +53,7 @@
 
     .@{prefix}-slider__dot {
       border-radius: 50%;
-      border: 2rpx solid #dcdcdc;
+      border: 4rpx solid @dot-color;
       position: absolute;
       background-color: @block-color;
       width: @block-size;
@@ -67,15 +68,21 @@
   }
 
   .@{prefix}-slider__value--min {
-    margin-left: 16px;
+    margin-left: 32rpx;
   }
 
   .@{prefix}-slider__value--max {
-    margin-right: 16px;
+    margin-right: 32rpx;
   }
 
   .@{prefix}-slider__value--right {
     flex-basis: 80rpx;
+
+    .@{prefix}-slider__value--text {
+      margin-right: 32rpx;
+      text-align: right;
+      display: block;
+    }
   }
 }
 
@@ -110,7 +117,7 @@
 
     .@{prefix}-slider__dot {
       border-radius: 50%;
-      border: 2rpx solid #dcdcdc;
+      border: 4rpx solid @dot-color;
       position: absolute;
       z-index: 2;
       background-color: @block-color;
@@ -128,14 +135,19 @@
 
       &-value {
         position: relative;
-        top: -26px;
+        left: 50%;
+        transform: translateX(-50%);
+        top: -52rpx;
         text-align: center;
+        width: 48rpx;
+        height: 44rpx;
+        line-height: 44rpx;
       }
     }
 
     .@{prefix}-slider__line {
       position: absolute;
-      top: 8px;
+      top: 16rpx;
       height: 5rpx;
     }
   }
@@ -147,13 +159,14 @@
   width: @bar-height * 2;
   height: 14rpx;
   position: absolute;
-  bottom: 6rpx;
+  top: 6rpx;
   z-index: 1;
 
   .@{prefix}-slider__scale-desc {
     position: absolute;
-    color: rgba(0, 0, 0, 0.4);
+    left: 50%;
+    color: rgba(0, 0, 0, .9);
     transform: translateX(-50%);
-    top: 20rpx;
+    bottom: 20rpx;
   }
 }
diff --git a/src/slider/slider.ts b/src/slider/slider.ts
@@ -57,7 +57,7 @@ export default class Slider extends SuperComponent {
     lineRight: 0,
     dotTopValue: [0, 0],
     _value: 0,
-    blockSize: 16,
+    blockSize: 20,
     isScale: false,
     scaleArray: [],
     scaleTextArray: [],
@@ -296,7 +296,6 @@ export default class Slider extends SuperComponent {
           // 当前leftdot中心 + 左侧偏移量 = 目标左侧中心距离
           const left = pageX - initialLeft - halfBlock;
           const leftValue = this.convertPosToValue(left, 0);
-
           this.triggerValue([this.stepValue(leftValue), this.data._value[1]]);
         } else {
           const right = -(pageX - initialRight) - halfBlock;
@@ -325,6 +324,7 @@ export default class Slider extends SuperComponent {
 
     const newData = [...(_value as number[])];
     const leftValue = this.convertPosToValue(currentLeft, 0);
+
     newData[0] = this.stepValue(leftValue);
 
     this.triggerValue(newData);

diff --git a/src/slider/slider.wxml b/src/slider/slider.wxml
@@ -33,16 +33,17 @@
           <view
             id="singleDot"
             class="{{classPrefix}}__dot {{prefix}}-class-cursor"
-            style="left: {{activeLeft}}px"
+            style="left: {{activeLeft}}px; border-color: {{disabled ? disabledColor[0] : ''}}"
             bind:touchmove="onSingleLineTap"
             bind:touchend="onTouchEnd"
             bind:touchcancel="onTouchEnd"
           />
         </view>
       </view>
-      <text wx:if="{{label}}" class="{{classPrefix}}__value {{classPrefix}}__value--right">
-        {{utils.getValue(label, _value)}}
-      </text>
+
+      <view wx:if="{{label}}" class="{{classPrefix}}__value {{classPrefix}}__value--right">
+        <text class="{{classPrefix}}__value--text"> {{utils.getValue(label, _value)}}</text>
+      </view>
       <text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--max">
         {{ label ? utils.getValue(label, max) : max}}
       </text>
@@ -84,7 +85,7 @@
           bind:touchend="onTouchEnd"
           bind:touchcancel="onTouchEnd"
           class="{{classPrefix}}__dot {{classPrefix}}__dot--left {{prefix}}-class-cursor"
-          style="left: {{activeLeft}}px"
+          style="left: {{activeLeft}}px; border-color: {{disabled ? disabledColor[0] : ''}}"
         >
           <view wx:if="{{label}}" class="{{classPrefix}}__dot-value">
             {{utils.getValue(label, dotTopValue[0])}}
@@ -96,7 +97,7 @@
           bind:touchend="onTouchEnd"
           bind:touchcancel="onTouchEnd"
           class="{{classPrefix}}__dot {{classPrefix}}__dot--right {{prefix}}-class-cursor"
-          style="right: {{activeRight}}px"
+          style="right: {{activeRight}}px; border-color: {{disabled ? disabledColor[0] : ''}}"
         >
           <view wx:if="{{label}}" class="{{classPrefix}}__dot-value">
             {{utils.getValue(label, dotTopValue[1])}}