小程序组件 slider 的原生样式修改_qinnzheng

1、问题描述：

设计稿未选择的区域需要加内阴影和线

2、线实现思路：通过步长 step 知道需要多少跟线，然后将线定位到 slider 组件里，重要的是设置层级。

3、wxml代码：

<view class='slider'>

  <!-- 滑块 -->
  <slider show-value='{{false}}' max='{{slider}}' min='{{0}}' bindchange='slider1change' step='1'
    activeColor='red' />

  <!-- 滑块--背景里面的线 -->
  <view class='slider-lines'>
    <view class='slider-line' wx:for='{{sliderLength}}' wx:key='*this'></view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11

4、js代码：

options: {
    styleIsolation: 'shared'
  },
  properties: {
  },
  data: {
    slider: 10,
    sliderLength: [10,10,10,10,10,10,10,10,10,10]
  },
1
2
3
4
5
6
7
8
9

5、wxss代码：

/* 滑块控制部分 */
.slider {
  margin: 26rpx 48rpx 0 48rpx;
  position: relative;
}

/* 滑动选择器 */
wx-slider {
  margin: 0;
}

/* 背景条--已选择的颜色 */
wx-slider .wx-slider-track {
  border-radius: 39rpx;
  position: relative;
}

/* 滑块层级 */
wx-slider .wx-slider-handle {
  z-index: 3;
}

/* 背景条的颜色--背景色改成透明的 */
wx-slider .wx-slider-handle-wrapper {
  height: 40rpx;
  border-radius: 39rpx;
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 4rpx 4rpx red, inset 0 1rpx 2rpx rgba(0, 0, 0, .25), inset 0 4rpx 10rpx rgba(0, 0, 0, .15);
  position: relative;
  z-index: 1;
}

/* 滑块--背景里面的线 */
.slider-lines {
  display: flex;
  align-items: center;
  height: 40rpx;
  border-radius: 39rpx;
  background: #e6e6e6;
  // box-shadow: 0 4rpx 4rpx #fff, inset 0 1rpx 2rpx rgba(0, 0, 0, .25), inset 0 4rpx 10rpx rgba(0, 0, 0, .15);
  position: absolute;
  left: 0;
  right: 0;
  top: 16rpx;
}

.slider-line {
  width: 2rpx;
  height: 22rpx;
  border-right: 2rpx solid #D7D7D7;
  flex: 1;
}

.slider-line:last-child {
  border-right: 0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57