說明

• 本程序分為vuejs和微信小程序部分氏仗，主要不同會(huì)在下面標(biāo)志出來
• 代碼只是測試用，有不好的地方請(qǐng)見諒

實(shí)現(xiàn)思路

實(shí)現(xiàn)思路其實(shí)很簡單氨肌，就是根據(jù)獲取的寬度值修改div層的寬度

效果圖

vuejs部分

前端代碼部分--相信大家一看就明白

• 主要部分在:style="{width:imgWidth+'%'}"這里

<div class="main-chuanglian"
             @touchmove.prevent="mouseMoving"
             @touchend.stop="stopDrag">
          <div class="chuanlian-bar">
          <span class="chuanglian-num" :style="tempElementStyle(el)" v-for="el in temperatureGrades" :key="el">
            <label class="chuanglian-text">{{el}}</label>
          </span>
            <div class="chuanglian-sel-block" :style="sliderStyle">
              <div class="chuanglian-sel-bar"  @touchstart.stop="startDrag">

              </div>
            </div>
          </div>

          <div style="position: relative;top:10px;width: 220px">
            <div class="leftcurtain">
              <img src="./../assets/frontcurtain.jpg" style="height: 100%;position: absolute;left: 0" :style="{width:imgWidth+'%'}"/>
            </div>
            <div class="rightcurtain">
              <img src="./../assets/frontcurtain.jpg" style="height:100%;position: absolute;right: 0" :style="{width:imgWidth+'%'}"/>
            </div>
          </div>
</div>

js代碼部分

代碼請(qǐng)參考文章“vuejs刻度尺代碼鸿秆，通過移動(dòng)標(biāo)志塊進(jìn)行調(diào)整刻度的方式”的js代碼部分

微信小程序部分

前端代碼部分--相信大家一看就明白
主要部分在width:{{currentTemperature | round}}%這里

<view>
          <view class="main-chuanglian"
          bindtouchmove="mouseMoving"
          bindtouchend="stopDrag">
            <view class="chuanlian-bar">
              <span class="chuanglian-num" style="{{tempElementStyle(el)}}" wx:for="{{temperatureGrades}}" wx:key="{{item}}">
                <label class="chuanglian-text">{{item}}</label>
              </span>
              <view class="chuanglian-sel-block" style="{{sliderStyle}}">
                <view class="chuanglian-sel-bar"  bindtouchstart="startDrag" bindtouchmove="mouseMoving">

                </view>
              </view>
            </view>

            <view style="position: relative;top:15px;width: 220px">
              <view class="leftcurtain">
                <image src="../../res/img/frontcurtain.jpg" 
                style="height: 100%;position: absolute;left: 0;width:{{currentTemperature | round}}%"></image>
              </view>
              <view class="rightcurtain">
                <image src="../../res/img/frontcurtain.jpg" 
                style="height:100%;position: absolute;right: 0;width:{{currentTemperature | round}}%"></image>
</view>

js代碼部分

代碼請(qǐng)參考文章“小程序刻度尺代碼，通過移動(dòng)標(biāo)志塊進(jìn)行調(diào)整刻度的方式”的js代碼部分

因?yàn)槭菧y試代碼怎囚，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;
}

總結(jié)

• 其實(shí)微信小程序和vuejs實(shí)現(xiàn)方式基本是一樣的卿叽，只是小程序在修改變量或者值的時(shí)候有略微的不同
• 小程序需要注意不支持計(jì)算屬性等，所以請(qǐng)一定要將https://github.com/donghaohao/vuefy下的js文件導(dǎo)入小程序中恳守，該程序不是本人編寫考婴，不過使用起來沒有問題。
• 如果以上提到的兩個(gè)js代碼鏈接在這里：
  http://www.reibang.com/p/a7e3335c8e7c
  http://www.reibang.com/p/f4745d3570a2