kitchendDevice/components/select-ruler/select-ruler.vue

<template>
  <view id="select-ruler" class="select-ruler">
    <!-- 遮罩层 -->
    <view class="tap-mask" v-if="disable"></view>
    <!-- 线 -->
    <view class="line"></view>
    <view class="row-line"></view>
    <!-- 左右渐变遮罩 -->
    <view class="mask mask-left"></view>
    <view class="mask mask-right"></view>
    <!-- 刻度尺 -->
    <scroll-view :scroll-x="true" enhanced :show-scrollbar="false" @scroll="handleScroll" @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper" :scroll-left="scroll_left">
      <span :style="{'margin-left': index == 0 ? `${el_width+10}px`:'','margin-right':index==max?`${el_width-20}px`:''}"
        class="ruler-item span-item" v-for="(item, index) in (max - min + 1)">
        <span>{{((index + min)/multiple).toFixed(point)}}</span>
      </span>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    name: "select-ruler",
    data() {
      return {
        number: 0,
        scroll_left: 1,
        last_scroll_left: 0,
        el_width: 0,
        left: 0,
        right: 0,
        scroll: {
          detail: {},
        },
      };
    },
    props: {
      // 最小值
      min: {
        type: Number,
        default: 0
      },
      // 最大值
      max: {
        type: Number,
        default: 500
      },
      // 缩放比例
      multiple: {
        type: Number,
        default: 1
      },
      // 默认值
      defaultValue: {
        type: Number,
        default: 0
      },
      // 是否禁用
      disable: {
        type: Boolean,
        default: false,
      },
      // 小数点后保留位数
      point: {
        type: Number,
        default: 0,
      }
    },
    mounted() {
      // 等待滚动条初始化完成
      this.setDefault(this.defaultValue);
    },
    methods: {
      // 刻度尺滚动监听
      handleScroll(e) {
        this.scroll = e;
        console.log(e.detail.scrollLeft)
        this.number = Math.round(e.detail.scrollLeft / 10)
        if (this.number > this.max) {
          this.number = this.max
        } else {
        }
        this.$emit('change', ((this.number + this.min) / this.multiple).toFixed(this.point));
      },
      scrolltoupper() {
        this.number = 0
        this.$emit('change', this.number);
      },
      scrolltolower() {
        this.number = this.max
        this.$emit('change', this.number);
      },
      // 初始化刻度尺
      initScroll() {
        this.scroll_left = this.number * 10
        this.last_scroll_left = this.scroll_left
      },
      // 设置默认值
      setDefault(number) {
        const query = wx.createSelectorQuery().in(this)
        query.select('#select-ruler').boundingClientRect(rect => {
          if (rect) {
            this.el_width = rect.width / 2
            if (number < this.min || number > this.max) {
              uni.showToast({
                title: `数值超出范围(${this.min/this.multiple}-${this.max/this.multiple})`,
                icon: 'none'
              });
            }
            if (number < this.min) number = this.min;
            if (number > this.max) number = this.max;
            this.number = number - this.min;
            this.initScroll();
          }
        }).exec()

      },
      // 增加
      plusValue(step) {
        this.setDefault(this.number + this.min + Math.floor(step));
      },
      // 减少
      reduceValue(step) {
        this.setDefault(this.number + this.min - Math.floor(step));
      },
    }
  }
</script>

<style scoped lang="scss">
  .select-ruler {
    width: 100%;
    height: 150rpx;
    margin-top: 20rpx;
    position: relative;

    .tap-mask {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 10;
      top: 0;
      left: 0;
    }

    .line {
      width: 20rpx;
      position: absolute;
      left: 366rpx;
      top: 40rpx;
      text-align: center;

      &:before {
        content: '';
        width: 6rpx;
        height: 80rpx;
        background: #00BC00;
        display: inline-block;
        vertical-align: text-top;
      }
    }

    .row-line {
      width: 100%;
      height: 1px;
      background: rgba(#3A414B, .07);
      top: 40rpx;
      left: 0;
      position: absolute;
    }

    .mask {
      width: 150rpx;
      height: 120rpx;
      position: absolute;
      top: 0;
      z-index: 2;
      pointer-events: none;

      &.mask-left {
        left: 0;
        background-image: linear-gradient(to right, #fff, rgba(#fff, 0));
      }

      &.mask-right {
        right: 0;
        background-image: linear-gradient(to right, rgba(#fff, 0), #fff);
      }
    }

    scroll-view {
      width: 100%;
      height: 100%;
      white-space: nowrap;

      .slot {
        display: inline-block;
      }

      .ruler-item {
        width: 20rpx;
        text-align: center;
        display: inline-block;
        position: relative;
        padding-top: 40rpx;

        // &:first-child {
        // 	margin-left: 370rpx;
        // }
        // &:last-child {
        // 	margin-right: 370rpx;
        // }
        &:before {
          content: '';
          width: 1px;
          height: 60rpx;
          background: rgba(#3A414B, .15);
          display: inline-block;
          vertical-align: text-top;
        }

        span {
          position: absolute;
          top: -10rpx;
          left: 50%;
          transform: translateX(-50%);
          color: #3D3D3D;
          font-size: 18px;
          display: none;
        }

        &:nth-child(10n+1) {
          &::before {
            width: 1px;
            height: 80rpx;
          }

          span {
            display: block;
          }
        }

      }
    }
  }

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }
</style>