记录一个公司项目（uniapp原生实现异形范围选择器slider）

公司要求根据 UI 的设计实现一个如下所示的异形范围选择滑动条。

但是目前没有合适的第三方库可用，且对于拖拽事件有些手生了，所以只能亲手这个组件了，在此记录一下，顺便复习一下拖拽事件的原理。

直接上 uniapp 代码，最后实现效果就如上图所示：

<template>
  <view class="zh-slider">
    <!-- 异形图mask -->
    <view class="bar-container">
      <!-- 范围mask -->
      <view
        class="bar-cover"
        :style="`mask-image: linear-gradient(90deg, transparent 0%, transparent ${currentMinPercent}%, white ${currentMinPercent}%, white ${currentMaxPercent}%, transparent ${currentMaxPercent}%, transparent 100%);`"
      >
        <view class="bar"></view>
      </view>
    </view>
    <view class="num-val">
      <!-- 最大值和最小值 -->
      <view class="static">
        <text class="min-val">{{minVal}}</text>
        <text class="max-val">{{maxVal}}</text>
      </view>

      <!-- 滑动栏 -->
      <view
        class="handle-bar"
        @touchmove="drag"
        @touchend="dragEnd"
        @mousemove="drag"
        @mouseup="dragEnd"
      >
        <text
          data-class="current-min-val"
          class="current-min-val"
          :style="`left: ${percent1}%;`"
          @touchstart="dragStart"
          @mousedown="dragStart"
          >{{currentMinVal}}</text
        >

        <text
          data-class="current-max-val"
          class="current-max-val"
          :style="`left: ${percent2}%;`"
          @touchstart="dragStart"
          @mousedown="dragStart"
          >{{currentMaxVal}}</text
        >
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "zh-slider",
    props: {
      minVal: {
        type: Number,
        default: 60,
      },
      maxVal: {
        type: Number,
        default: 90,
      },
      // 单位rpx，滑动栏距离左右屏幕的距离，如果在组件外修改了这个值，则需要在此同步更改该值
      sideGapWidth: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        percent1: 30, // 百分比1
        percent2: 60, // 百分比2
        barActive1: false,
        barActive2: false,
        deviceWidth: 0, // 单位px，屏幕宽度
      };
    },
    computed: {
      currentMinPercent() {
        return Math.min(this.percent1, this.percent2);
      },
      currentMaxPercent() {
        return Math.max(this.percent1, this.percent2);
      },
      currentMinVal() {
        return (
          (this.percent1 / 100) * (this.maxVal - this.minVal) +
          this.minVal
        ).toFixed(0);
      },
      currentMaxVal() {
        return (
          (this.percent2 / 100) * (this.maxVal - this.minVal) +
          this.minVal
        ).toFixed(0);
      },
      // 滑动栏宽度，单位px
      handleBarContainerWidth() {
        return this.rpx2px(750 - 2 * this.sideGapWidth);
      },
    },
    mounted() {
      this.getDeviceWidth();
    },
    methods: {
      /**
       * 获取屏幕宽度
       */
      async getDeviceWidth() {
        let res = await uni.getSystemInfo();
        this.deviceWidth = res[1].windowWidth;
      },
      dragStart(e) {
        if (e.target.dataset.class === "current-min-val") {
          this.barActive1 = true;
        } else if (e.target.dataset.class === "current-max-val") {
          this.barActive2 = true;
        }
      },
      dragEnd(e) {
        this.barActive1 = this.barActive2 = false;
        let min = Math.min(this.currentMinVal, this.currentMaxVal),
          max = Math.max(this.currentMinVal, this.currentMaxVal);

        this.$emit("change", [min, max]);
      },
      drag(e) {
        if (this.barActive1 || this.barActive2) {
          e.preventDefault();
          let clientX = 0;
          if (e.type === "touchmove") {
            clientX = e.touches[0].clientX - this.rpx2px(this.sideGapWidth);
          } else {
            clientX = e.clientX - this.rpx2px(this.sideGapWidth);
          }

          if (this.barActive1) {
            if (clientX <= 0) {
              this.percent1 = 0;
            } else if (clientX >= this.handleBarContainerWidth) {
              this.percent1 = 100;
            } else {
              this.percent1 = (clientX / this.handleBarContainerWidth) * 100;
            }
          } else if (this.barActive2) {
            if (clientX <= 0) {
              this.percent2 = 0;
            } else if (clientX >= this.handleBarContainerWidth) {
              this.percent2 = 100;
            } else {
              this.percent2 = (clientX / this.handleBarContainerWidth) * 100;
            }
          }
        }
      },
      /**
       * rpx转px
       * @param {Number} rpx
       */
      rpx2px(rpx) {
        return (rpx / 750) * this.deviceWidth;
      },
      /**
       * px转rpx
       * @param {Number} px
       */
      px2rpx(px) {
        (px / this.deviceWidth) * 750;
      },
    },
  };
</script>

<style scoped lang="scss">
  .zh-slider {
    width: 700rpx;
    height: 150rpx;

    $barHeight: 55%;

    > .bar-container {
      position: relative;
      height: $barHeight;
      background-color: #eff1f1;

      // CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
      // 这里本来是引用了另一个图片文件，但是为了写博客方便，就改成了base64数据
      mask: url(data:image/png;base64,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)
        no-repeat center/100% 100%;

      > .bar-cover {
        width: 100%;
        height: 100%;

        > .bar {
          width: 100%;
          height: 100%;
          background-image: linear-gradient(90deg, #43ad93 0%, #5beeb9 100%);
        }
      }
    }

    > .num-val {
      position: relative;
      width: 100%;
      height: calc(100% - #{$barHeight});

      > .static {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;

        > text {
          color: #9e9e9e;
        }
      }

      > .handle-bar {
        position: absolute;
        left: 0%;
        top: 0%;
        width: 100%;
        height: 100%;
        padding: 6rpx 0;
        box-sizing: border-box;

        > text {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100rpx;
          height: 60rpx;
          background-image: linear-gradient(90deg, #30ac8f 0%, #4ddebc 100%);
          border-radius: 12rpx;
          color: white;
          transform: translateX(calc(0rpx - 50%));

          &.current- {
            &min-val {
            }

            &max-val {
            }
          }
        }
      }
    }
  }
</style>