• 本程序是参考的网上的代码修改后实现的链接地址会放到文章最后位置

• 以上的参考的代码为横向代码，但是有时候我们需要的纵向的刻度尺，所以将以上代码修改为纵向

• 因为是在vuejs版本的基础上做的小程序兼容版本，所以大部分代码其实和“vuejs刻度尺代码，通过移动标志块进行调整刻度的方式”一样

• 该程序仅仅只能用于微信小程序，如果需要在vuejs或者js上使用，请参见原创代码路径或者“vuejs刻度尺代码，通过移动标志块进行调整刻度的方式”

• 效果图

  
  
  image.png

js代码部分

var ratio = 10;// 每个刻度所占位的px
const sliderMinX = 0
const sliderMaxX = 245
const { watch, computed } = require('../../utils/vuefy.js')
var app = getApp();//初始化getApp

//初始化数据

data: {
    temperatureGrades: [30, 25, 20, 15, 10],
    dragging: false,
    initialMouseX: 0,
    sliderX: 0,
    initialSliderX: 0,
    initTemperature: 0
  }

//生命周期函数--监听页面加载

onLoad: function (options) {
    var tmp = 24;
    this.setData({
      sliderX: (30 - tmp) * 254 / 20
    });
    computed(this, {
      sliderStyle() {
        return `transform: translate3d(0, ${this.data.sliderX}px, 0);`
      },
      bgStyle() {
        return `background: linear-gradient(to bottom right, ${this.gradientStart}, ${this.gradientEnd});`
      },
      currentTemperature() {
        var _self = this;
        const tempRangeStart = 30;
        const tempRange = 20;
        return tempRangeStart - parseInt((this.data.sliderX / sliderMaxX * tempRange));
      }
    });
  }

//核心代码部分

startDrag(e) {
    var _self = this;
    this.setData({
      dragging: true,
      initialMouseX: e.touches[0].pageY,
      initialSliderX: _self.data.sliderX
    });
  },
  stopDrag() {
    this.setData({
      dragging: false
    });
  },
  mouseMoving(e) {
    if (this.data.dragging) {
      const dragAmount = e.touches[0].pageY - this.data.initialMouseX;
      const targetX = this.data.initialSliderX + dragAmount;

      this.setData({
        sliderX: Math.max(Math.min(targetX, sliderMaxX), sliderMinX)
      });
      // let targetGradient = coldGradient
      // if (this.currentTemperature >= 25) {
      //   targetGradient = hotGradient
      // }

      // if (this.gradientStart !== targetGradient.start) {
      //   TweenLite.to(this, 0.7, {
      //     'gradientStart': targetGradient.start,
      //     'gradientEnd': targetGradient.end
      //   })
      // }
    }
    //e.stopPropagation();
  },
  tempElementStyle(tempNumber) {
    const nearDistance = 3
    const liftDistance = 12

    const diff = Math.abs(this.currentTemperature - tempNumber)
    const distY = (diff / nearDistance) - 1
    const elementY = Math.min(distY * liftDistance, 0)
    return `transform: translate3d(${elementY}px, 0, 0)`
  }

• css代码部分

.main-container {
  display: grid;
  grid-template-columns: 3fr 1fr;
  height: 22rem;
  width: 120px;
  border:1px solid #dddddd;
}

.upper-container {
  position: relative;
  background: linear-gradient(to bottom right, #cccccc, #eeeeee);
}
.lower-container {
  background-color: #f5f5f5;
}

.temperature-text {
  position: relative;
  top: 40%;
  left:5%;
  font-size: 1.2rem;
  width: 10%;
  text-align: center;
  user-select: none;
}

.temperature-element {
  text-align: center;
  display: block;
  width: 40px;
  height:49px;
  margin: 10px 0px 10px 0px;
  opacity: 0.7;
}

.temperature-element-line {
  font-size: 7px;
}

.temperature-graduation {
  position: absolute;
  left: calc(40% - 0px);
  top: calc(4% - 0px);
  user-select: none;
}

.slider-container {
  width: 100%;
  height: 70px;
  margin-top: 0px;
  margin-left: calc(50% - 14px);
  position: relative;
}

.slider-button {
  position: absolute;
  left: -20px;
  top: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #bbbbbb;
  cursor: grab;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  z-index: 999999;
}

.slider-icon {
  margin-top: 13px;
  margin-left: 16px;
  color: white;
}

• 小程序前端代码部分

<view class="main-container">
  <view class="upper-container"
            bindtouchmove="mouseMoving"
            bindtouchend="stopDrag">
    <view class="temperature-text">
      <view>{{currentTemperature | round}}</view>
      <view style="font-size:10px;text-align: center;margin-left:2px;">(°c)</view>
    </view>
    <view class="temperature-graduation">
    <view class="temperature-element" wx:for="{{temperatureGrades}}" wx:key="{{item}}">
      <text class="temperature-element-line">-</text>
      <text class="temperature-element-number">{{item}}</text>
    </view>
    </view>
  </view>
  <view class="lower-container">
    <view class="slider-container">
      <view class="slider-button" bindtouchstart="startDrag" bindtouchmove="mouseMoving" style="{{sliderStyle}}">
        <i class="fa fa-thermometer-empty slider-icon"></i>
      </view>
    </view>
  </view>
</view>

总结

• 该代码是根据https://codepen.io/mochilee/pen/ejWGXN修改而成，并非被人原创。
• 以上代码还参考了github上以为对小程序添加计算属性和switch监听函数的js库文件，地址：https://github.com/donghaohao/vuefy

说明：

如果想要运行以上代码，请一定要将https://github.com/donghaohao/vuefy下的js文件导入小程序中