說明

本程序分為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實現方式基本是一樣的，只是小程序在修改變量或者值的時候有略微的不同

小程序需要注意不支持計算屬性等，所以請一定要將https://github.com/donghaohao/vuefy下的js文件導入小程序中，該程序不是本人編寫，不過使用起來沒有問題。

總結

以上是生活随笔為你收集整理的窗帘效果图css,vuejs、微信小程序窗帘效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。