vuejs、微信小程序窗帘效果

说明

• 本程序分为vuejs和微信小程序部分，主要不同会在下面标志出来
• 代码只是测试用，有不好的地方请见谅

实现思路

实现思路其实很简单，就是根据获取的宽度值修改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代码部分

代码请参考文章“vuejs刻度尺代码，通过移动标志块进行调整刻度的方式”的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代码部分

代码请参考文章“小程序刻度尺代码，通过移动标志块进行调整刻度的方式”的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实现方式基本是一样的，只是小程序在修改变量或者值的时候有略微的不同
• 小程序需要注意不支持计算属性等，所以请一定要将https://github.com/donghaohao/vuefy下的js文件导入小程序中，该程序不是本人编写，不过使用起来没有问题。
• 如果以上提到的两个js代码链接在这里：
  https://www.jianshu.com/p/a7e3335c8e7c
  https://www.jianshu.com/p/f4745d3570a2