vuejs刻度尺代码，通过移动标志块进行调整刻度的方式

说明

• 本程序是参考的网上的代码修改后实现的链接地址会放到文章最后位置
• 以上的参考的代码为横向代码，但是有时候我们需要的纵向的刻度尺，所以将以上代码修改为纵向
• 如果需要适用于微信小程序，仅仅做一些简单的修改即可，具体可以见下一个文章“微信小程序刻度尺代码，通过移动标志块进行调整刻度的方式”。

1、代码说明--vuejs版本，移动标志块进行刻度改变的方式

说明：如果需要用在微信小程序，请跳到下面的小程序篇

• 效果图

  
  
  image.png

• js代码片段(核心)

• 1、代码片段采用的vuejs的方式

//使用的vuex前端ui库
import { Group,GroupTitle,Cell,Panel,Flexbox, FlexboxItem } from 'vux'
//tweenLite缓冲库
import TweenLite from "gsap/TweenLite";
  const sliderMinX = 0;
  const sliderMaxX = 245
  const coldGradient = {
    start: '#bbbbbb',
    end: '#fefefe'
  }
  const hotGradient = {
    start: '#bbbbbb',
    end: '#fefefe'
  };
//主要代码
export default {
    components: { Group,GroupTitle,Cell,Panel,Flexbox, FlexboxItem},
    name: 'index',
    data () {
      return {
        msg:'',
        temperatureGrades: [30, 25, 20, 15, 10],//纵向显示刻度的值，可以随意更换
        dragging: false,//默认不允许拖动
        initialMouseX: 0,
        sliderX: 0,
        initialSliderX: 0,
        gradientStart: coldGradient.start,
        gradientEnd: coldGradient.end,
        initTemperature:0
      }
    },
    filters: {
      round (num) {
        return Math.round(num)
      }
    },
    computed: {
      sliderStyle () {
        return `transform: translate3d(0, ${ this.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.sliderX / sliderMaxX * tempRange));
      }
    },
    created(){
      this.init();
    },
    methods:{
      init(){
        var tmp = 27;
        this.sliderX = (30-tmp) * 254 / 20;
      },
      startDrag (e) {
        this.dragging = true
        this.initialMouseX = e.touches[0].pageY
        this.initialSliderX = this.sliderX
      },
      stopDrag () {
        this.dragging = false
      },
      mouseMoving (e) {
        if(this.dragging) {
          const dragAmount = e.touches[0].pageY - this.initialMouseX
          const targetX = this.initialSliderX + dragAmount
          this.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)`
      }
    }

• 页面代码片段

          

            

              
{{currentTemperature | round}}
              
(°c)
            
            

              

                -
                {{el}}

              
            
          
        /*标志块*/
          

            

              

                
              
            
          
        

• 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, #5564c2, #3a2e8d);
}
.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: 20px;
  height: 70px;
  margin-top: 0px;
  margin-left: calc(50% - 77px);
  position: relative;
}
.slider-button {
  position: absolute;
  left: 42px;
  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;
}

总结

代码其实很简单，当然也不是本人原创，仅仅只是在别人的代码上做了一些很简单的修改，就当学习一下别人的代码思路。

原创源代码地址

https://codepen.io/mochilee/pen/ejWGXN