说明
本程序分为vuejs和微信小程序部分，主要不同会在下面标志出来
代码只是测试用，有不好的地方请见谅
实现思路
实现思路其实很简单，就是根据获取的宽度值修改div层的宽度
效果图
vuejs部分
前端代码部分--相信大家一看就明白
主要部分在:style="{width:imgWidth+'%'}"这里
@touchmove.prevent="mouseMoving"
@touchend.stop="stopDrag">
{{el}}
js代码部分
代码请参考文章“vuejs刻度尺代码，通过移动标志块进行调整刻度的方式”的js代码部分
微信小程序部分
前端代码部分--相信大家一看就明白
主要部分在width:{{currentTemperature | round}}%这里
bindtouchmove="mouseMoving"
bindtouchend="stopDrag">
{{item}}
style="height: 100%;position: absolute;left: 0;width:{{currentTemperature | round}}%">
style="height:100%;position: absolute;right: 0;width:{{currentTemperature | round}}%">
js代码部分
代码请参考文章“小程序刻度尺代码，通过移动标志块进行调整刻度的方式”的js代码部分
因为是测试代码，css样式就用的是同一套啦
.main-chuanglian{
background: #dddddd;
width: 220px;
margin:30px auto;
position: absolute;
right:10px;
top:15%;
}
.chuanlian-bar{
height:15px;
line-height:15px;
position: relative;
}
.chuanglian-num{
display: inline-block;
background: #eeeeee;
text-align: center;
width:44px;
}
.chuanglian-text{
font-size:10px;
color:#bbbbbb;
}
.chuanglian-sel-block{
width: 25px;
height: 20px;
margin-top: 0px;
position: relative;
top:-20px;
}
.chuanglian-sel-bar{
position: absolute;
height:25px;
width:25px;
border-radius: 25px;
background: #bbbbbb;
top:-2px;
left:15%;
border:1px solid #dddddd;
}
.leftcurtain{
width:50%;
height:205px;
top:0px;
left:0px;
position:absolute;
z-index:2;
}
.rightcurtain{
width:50%;
height:205px;
right:0px;
top:0px;
position:absolute;
z-index:3;
}
总结
其实微信小程序和vuejs实现方式基本是一样的，只是小程序在修改变量或者值的时候有略微的不同
小程序需要注意不支持计算属性等，所以请一定要将/donghaohao/vuefy下的js文件导入小程序中，该程序不是本人编写，不过使用起来没有问题。
