说明
- 本程序是参考的网上的代码修改后实现的链接地址会放到文章最后位置
- 以上的参考的代码为横向代码，但是有时候我们需要的纵向的刻度尺，所以将以上代码修改为纵向
- 如果需要适用于微信小程序，仅仅做一些简单的修改即可，具体可以见下一个文章“微信小程序刻度尺代码，通过移动标志块进行调整刻度的方式”。
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)`
}
}
- 页面代码片段
<div class="main-container"
@mousemove="mouseMoving"
@touchmove.prevent="mouseMoving"
@mouseup="stopDrag"
@touchend.stop="stopDrag"
style="position: absolute;right:0;top:50px;">
<div class="upper-container" :style="bgStyle">
<div class="temperature-text">
<div>{{currentTemperature | round}}</div>
<div style="font-size:10px;text-align: center;margin-left:2px;">(°c)</div>
</div>
<div class="temperature-graduation">
<div class="temperature-element" v-for="el in temperatureGrades" :key="el" :style="tempElementStyle(el)">
<span class="temperature-element-line">-</span>
<span class="temperature-element-number">{{el}}</span><br>
</div>
</div>
</div>
/*标志块*/
<div class="lower-container">
<div class="slider-container" :style="sliderStyle">
<div class="slider-button" @touchstart.stop="startDrag">
<i class="fa fa-thermometer-empty slider-icon"></i>
</div>
</div>
</div>
</div>
- 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;
}
总结
代码其实很简单，当然也不是本人原创，仅仅只是在别人的代码上做了一些很简单的修改，就当学习一下别人的代码思路。
