vuejs、微信小程序窗帘效果

说明

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

实现思路

实现思路其实很简单，就是根据获取的宽度值修改div层的宽度

效果图

vuejs部分

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

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

          

          
            {{el}}
          
            

              


              
            
          

          

            

              
            
            

              
            
          

js代码部分

代码请参考文章“vuejs刻度尺代码，通过移动标志块进行调整刻度的方式”的js代码部分

微信小程序部分

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

          
            
              
                {{item}}
              
              
                

                
              
            

            
              
                
              
              
                

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