uView u-slider 自定义滑块

有个需求UI设计的滑动选择器中的滑块如下所示：

项目中集成的是vView2.0组件库，u-slider组件中有 blockStyle 属性，看着是用来设置自定义滑块的。但是试了下，没有效果，不知怎么回事。看了一下uView1.0组件库 u-slider组件有自定义插槽属性，所以就想着把uView1.0 中的u-slider组件给单拎出来在项目中集成。步骤如下：

uView 2.0

 uView 1.0 

 1. 拷贝u-slider组件到项目中

     直接从uView 1.0 gitee中把u-slider.vue文件中的内容拷贝出来(https://gitee.com/umicro/uView/tree/master/uview-ui/components/u-slider)

放到自己项目中的@/components/my-slider/my-slider.vue中

注意：给组件新起一个名字my-slider  不要用原来的文件名u-slider ， 也不要起名为slider。

2. 按需改造my-slider.vue

    现在slider 已经是自己项目中的一个组件了，为了方面可以对slider简单改造一下，例如给activeColor，inactiveColor 属性设置个默认颜色，这样使用的时候就不用传值了。

因为这里用自定义插槽，所以把代码也改造一下：

            <view class="u-slider__button-wrap" @touchstart="onTouchStart" 
				@touchmove="onTouchMove" @touchend="onTouchEnd" 
				@touchcancel="onTouchEnd">
				<slot v-if="$slots.default  || $slots.$default"/>
				<view v-else class="u-slider__button" :style="[blockStyle, {
					height: blockWidth + 'rpx',
					width: blockWidth + 'rpx',
					backgroundColor: blockColor
				}]">view>
			view>
 
 
 
            <view class="u-slider__button-wrap" @touchstart="onTouchStart" 
				@touchmove="onTouchMove" @touchend="onTouchEnd" 
				@touchcancel="onTouchEnd">
				<slot />
				
			view>

 不用设置选自定义插槽属性了，直接写插槽就行了。

3. 使用my-slider组件

    使用这个组件也非常简单：

            <my-slider v-model="temperatureValue" :isBg="true">
              <view class="">
                <view class="badge-button"> {{ temperatureValue }}view>
              view>
            my-slider>
 
 
 export default {
  components: { mySlider },
  data() {
    return {
      lightnessValue: 20,
      temperatureValue: 18,
    };
  },
};
 
 
  .badge-button {
    width: 104rpx;
    line-height: 72rpx;
    background: #ffffff;
    box-shadow: 4rpx 10rpx 34rpx 0px rgba(29, 22, 72, 0.2);
    border-radius: 36rpx;
    text-align: center;
  }

4. 滑动选择器两边设置图标

    UI 设计的滑动选择器两边分别放了图标，这个实现起来非常简单，父元素设置display:flex; 

    justify-content: space-between 就可以了。 但是设置后滑动选择器就不正常了。原因是滑动选择器width为auto。嗯 用个标签把滑动选择器包裹一下，然后设置flex: 1，让其把滑动选择器的宽度撑开。

关于flex：1 有篇文章写的非常好：

Digging Into the Flex Property - Ahmad Shadeed

有兴趣的可以看看。