窗帘效果图css,vuejs、微信小程序窗帘效果
說明
本程序分為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、微信小程序窗帘效果的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 面板服务器默认是什么系统,免费Linux
- 下一篇: ajax 加载 提示 锁屏,js锁屏解屏