微信小程序刻度滑块选择组件

如图，在部分产品需求中会出现刻度滑块选择。例如分数，金钱等等

 

 WXML

<!--component/zyslider.wxml-->

<view class="container">
  <view class="slider-item min" style="left:{
   
   {leftValue}}rpx;"
    catchtouchmove="_minMove">
    <image src="../../images/all/bz3.png"></image>
    <view class="minValue">{
   
   {startValue}}</view>

  </view>
  <view class="slider-item max" style="left:{
   
   {rightValue}}rpx;;"
    catchtouchmove="_maxMove">
    <image src="../../images/all/bz2.png"></image>
    <view class="minValue">{
   
   {endValue}}</view>
  </view>

  <view class="slider-body left"
    style="display:none;left:0rpx; width:{
   
   {leftValue}}rpx;background-color:{
   
   {backgroundColor}};"></view>
  <view class="slider-body body"
    style="display:none;left:{
   
   {leftValue}}rpx; width:{
   
   {rightValue-leftValue}}rpx;background-color:{
   
   {selectedColor}};"></view>
  <view class="slider-body right"
    style="display:none;left:{
   
   {rightValue}}rpx; width:{
   
   {totalLength - rightValue}}rpx;background-color:{
   
   {backgroundColor}};"></view>
  <slot></slot>
</view>

wxss

/* component/zyslider.wxss */
.container {
  /*height: 100%;*/
  width: 95%;
  position: absolute;
  left: 5%;
}

.slider-body {
  height: 8rpx;
  background-color: #EAEDF2;
  position: relative;
}

.body {
  bottom: 55rpx;
  background: linear-gradient(to right, #937EF3, #A6C8FF);
  z-index: 0.3;
}

.left {
  bottom: 46rpx;
  z-index: 0.1;
}

.right {
  z-index: 0.2;
  bottom: 62rpx;
}

.slider-item {
  z-index: 2;
  width: 63rpx;
  margin-bottom: 10rpx;
}
.slider-item image{
  width: 63rpx;
  height: 48rpx;
  position: relative;
  left: -25rpx;
  top:-83rpx;
}
.min {
  position: relative;
  top: 65rpx;
  font-size: 24rpx;
  text-align: center;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F90000;
  /* left: 100rpx; */
}
.slider-item .minValue{
  width: 63rpx;
  height: 48rpx;
  position: absolute;
  left: -25rpx;
  top:-80rpx;
}


.max {
  position: relative;
  /*left: 600rpx;*/
  font-size: 24rpx;
  text-align: center;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0085F9;
}


.hide{
display: none;
}

 js

// component/zyslider/zyslider.js
var util = require('../../utils/util')
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    /** slider 最小值 */
    min: {
      type: Number
    },
    /** slider 最大值 */
    max: {
      type: Number
    },

    startValue: {
      type: Number
    },
    endValue: {
      type: Number
    },
    /** 预选选择的小值*/
    minValue: {
      type: Number
    },
    /** 预选选择的大值 */
    maxValue: {
      type: Number
    },
    /** 滑块颜色 */
    blockColor:{
      type: String
    },
    /** 未选择进度条颜色 */
    backgroundColor:{
      type: String
    },
    /** 已选择进度条颜色 */
    selectedColor:{
      type: String
    }
    
  },


  /**
   * 组件的初始数据
   */
  data: {
    min: 300,
    max: 750,
    leftValue: 0,
    rightValue: 0,
    totalLength: 750,
    bigLength: 750,
    ratio:0.5,
    sliderLength: 60,
    containerLeft: 0, //标识整个组件，距离屏幕左边的距离
  },

  /**
   * 组件的方法列表
   */
  methods: {

    endPop(){
      var rightValue=wx.getStorageSync('rightValue')
      var leftValue=wx.getStorageSync('leftValue')
      if(rightValue){
        this.setData({
          rightValue:parseInt(rightValue),
        })
      }
      if(leftValue){
        this.setData({
          leftValue:parseInt(leftValue)
        })
      }
    },
     reset(){
      let minValue = this.data.minValue / this.data.max * this.data.bigLength
      let min = this.data.min / this.data.max * this.data.bigLength
      let right = this.data.maxValue / this.data.max * this.data.bigLength + this.data.sliderLength
    
       this.setData({
        leftValue: minValue - min,

        rightValue: right,
        min: 300,
        max: 750,
        totalLength: 750,
        bigLength: 750,
        ratio:0.5,
        sliderLength: 60,
        containerLeft: 0, //标识整个组件，距离屏幕左边的距离
       })
     },
    /**
    * 设置左边滑块的值
    */
    _propertyLeftValueChange: function () {

      let minValue = this.data.minValue / this.data.max * this.data.bigLength
      let min = this.data.min / this.data.max * this.data.bigLength
      this.setData({
        leftValue: minValue - min
      })
    },

    /**
     * 设置右边滑块的值
     */
    _propertyRightValueChange: function () {
      let right = this.data.maxValue / this.data.max * this.data.bigLength + this.data.sliderLength
      this.setData({
        rightValue: right
      })
    },

    /**
     * 左边滑块滑动
     */
    _minMove: function (e) {
      let pagex = e.changedTouches[0].pageX / this.data.ratio - this.data.containerLeft - this.data.sliderLength / 2

      if (pagex + this.data.sliderLength >= this.data.rightValue) {
        pagex = this.data.rightValue - this.data.sliderLength
      } else if (pagex <= 0) {
        pagex = 0
      }

      this.setData({
        leftValue: pagex
      })
      wx.setStorageSync('leftValue', pagex)
      let lowValue = parseInt(pagex / this.data.bigLength * parseInt(this.data.max - this.data.min) + this.data.min)
      var myEventDetail = { lowValue: lowValue }
      this.triggerEvent('lowValueChange', myEventDetail)
    },

    /**
     * 右边滑块滑动
     */
    _maxMove: function (e) {

      let pagex = e.changedTouches[0].pageX / this.data.ratio - this.data.containerLeft - this.data.sliderLength / 2
      if (pagex <= this.data.leftValue + this.data.sliderLength) {
        pagex = this.data.leftValue + this.data.sliderLength
      } else if (pagex >= this.data.totalLength) {
        pagex = this.data.totalLength
      }

      this.setData({
        rightValue: pagex
      })
      pagex = pagex - this.data.sliderLength
      let heighValue = parseInt(pagex / this.data.bigLength * (this.data.max - this.data.min) + this.data.min)
      wx.setStorageSync('rightValue', pagex)
      var myEventDetail = { heighValue: heighValue }
      this.triggerEvent('heighValueChange', myEventDetail)
    },
  },

  ready: function () {
    let that = this;
    const getSystemInfo = util.wxPromisify(wx.getSystemInfo)
    const queryContainer = util.wxPromisify(wx.createSelectorQuery().in(this).select(".container").boundingClientRect)
    util.wxPromisify(wx.getSystemInfo)()
      .then(res => {
        let ratio = res.windowWidth / 750
        that.setData({
          ratio: ratio,
        })
      })
      .then(() => {
        var query = wx.createSelectorQuery().in(this)
        query.select(".container").boundingClientRect(function (res) {
          that.setData({
            totalLength: res.width / that.data.ratio - that.data.sliderLength,
            bigLength: res.width / that.data.ratio - that.data.sliderLength * 2,
            rightValue: res.width / that.data.ratio - that.data.sliderLength,
            containerLeft: res.left / that.data.ratio
          })

        /**
         * 设置初始滑块位置
         */
        that._propertyLeftValueChange()
        that._propertyRightValueChange()
        that.endPop()
        }).exec()
      })
  }
})