vue橫向滑動和豎向滑動
阿新 • • 發佈：2021-01-21
技術標籤：vue
<!-- 裝置詳情頁面 --> <template> <div style="width: 100%;height: 100%;" id="huadongContent"> <div class="numberInfo"> <div class="flexRowCenterCenter"> <div class="oneNumber flexColumnCenterCenter"> <div class="numberValue">{{brightness}}%</div> <div class="numberText">亮度值</div> </div> <div style="width: 1px;height: 10px;background: white;"></div> <div class="oneNumber flexColumnCenterCenter"> <div class="numberValue">{{colorTemperature}}K</div> <div class="numberText">色溫值</div> </div> </div> </div> <template v-show="statusValue"> <div class="colorTemperature flexRowStartCenter" v-show="controlbarShow"> <img src="../assets/img/huadong/colorTemperature.png" width="10" height="22" /> <div class="control_bar" id="controlbar"> <div class="control_bar_cursor" id="controlbarcursor" :style="{left:(xPosition+'px')}"></div> </div> </div> <div class="brightness flexColumnCenterCenter" v-show="controlbar2Show"> <div> <div class="control_bar2" id="controlbar2"> </div> <div class="control_bar_cursor2" id="controlbarcursor2" :style="{height:(yPosition+'px')}"></div> </div> <img src="../assets/img/huadong/brightness.png" width="24" height="24" /> </div> <img src="../assets/img/huadong/slider.png" v-if="silderShow" class="sliderImg" :style="{left:silderx+'px',top:slidery+'px'}" width="48" height="48" /> </template> </div> </template> <script> export default { components: { }, props: ["bValue", 'ctValue', 'dimmerStatus'], data() { return { startx: 0, starty: 0, endx: 0, endy: 0, xPosition: -4, yPosition: 0, controlbarShow: false, controlbar2Show: false, silderx: 0, slidery: 0, silderShow: false, brightness: 0, //亮度 colorTemperature: 0, //色溫值 statusValue: true, }; }, filters: { }, watch: { dimmerStatus: { handler: function(nv, ov) { this.statusValue = nv }, immediate: true, }, bValue: { handler: function(nv, ov) { this.brightness = nv // let cbWidth = document.getElementById("controlbar").clientWidth // let contentWidth = document.getElementById("huadongContent").clientWidth // this.xPosition = nv*(cbWidth-3)*100 - 4 }, immediate: true, }, ctValue: { handler: function(nv, ov) { this.colorTemperature = nv // let cb2Height = document.getElementById("controlbar2").clientHeight // let contentHeight = document.getElementById("huadongContent").clientHeight // this.yPosition = (nv-2700)/(6500 - 2700)*cb2Height }, immediate: true, }, }, computed: { }, created() {}, mounted() { let that = this //手指接觸螢幕 document.getElementById("huadongContent").addEventListener("touchstart", function(e) { if (that.statusValue) { that.startx = e.touches[0].pageX; that.starty = e.touches[0].pageY; that.silderx = e.touches[0].pageX; that.slidery = e.touches[0].pageY; that.silderShow = true } }, false); //手指滑動螢幕 document.getElementById("huadongContent").addEventListener("touchmove", function(e) { // let cbcHeight = document.getElementById("controlbarcursor").clientHeight // let cbc2Width = document.getElementById("controlbarcursor2").clientWidth // let cbHeight = document.getElementById("controlbar").clientHeight // let cb2Width = document.getElementById("controlbar2").clientWidth if (that.statusValue) { that.endx = e.changedTouches[0].pageX; that.endy = e.changedTouches[0].pageY; that.silderx = e.changedTouches[0].pageX; that.slidery = e.changedTouches[0].pageY; let direction = that.getDirection(that.startx, that.starty, that.endx, that.endy); switch (direction) { case 0: break; case 1: if (!that.controlbarShow) { that.controlbar2Show = true that.$nextTick(() => { let cb2Height = document.getElementById("controlbar2").clientHeight // let cbc2Height = document.getElementById("controlbarcursor2").clientHeight let contentHeight = document.getElementById("huadongContent").clientHeight let percentage = cb2Height / contentHeight let angy = that.starty - that.endy; if (that.yPosition <= cb2Height) { if ((that.yPosition + angy * percentage) > cb2Height) { that.yPosition = (that.yPosition + angy * percentage) - cb2Height } else { that.yPosition = that.yPosition + angy * percentage } } that.colorTemperature = ((6500 - 2700) * (that.yPosition / cb2Height) + 2700).toFixed(0) that.startx = e.changedTouches[0].pageX; that.starty = e.changedTouches[0].pageY; }) } break; case 2: if (!that.controlbarShow) { that.controlbar2Show = true that.$nextTick(() => { // let cbc2Height = document.getElementById("controlbarcursor2").clientHeight let contentHeight = document.getElementById("huadongContent").clientHeight let cb2Height = document.getElementById("controlbar2").clientHeight let percentage = cb2Height / contentHeight let angy = that.starty - that.endy; if (that.yPosition > 0) { if ((that.yPosition + angy * percentage) <= 0) { that.yPosition = cb2Height - (that.yPosition + angy * percentage) } else { that.yPosition = that.yPosition + angy * percentage } } that.yPosition / cb2Height that.colorTemperature = ((6500 - 2700) * (that.yPosition / cb2Height) + 2700).toFixed(0) that.startx = e.changedTouches[0].pageX; that.starty = e.changedTouches[0].pageY; }) } break; case 3: if (!that.controlbar2Show) { that.controlbarShow = true console.log("左") that.$nextTick(() => { // let cbcWidth = document.getElementById("controlbarcursor").clientWidth let cbWidth = document.getElementById("controlbar").clientWidth let contentWidth = document.getElementById("huadongContent").clientWidth let percentage = cbWidth / contentWidth let angx = that.endx - that.startx; if (that.xPosition >= -4) { if ((that.xPosition + angx * percentage) <= -4) { that.xPosition = (cbWidth - 3) + (that.xPosition + angx * percentage) } else { that.xPosition = that.xPosition + angx * percentage } } that.brightness = ((that.xPosition + 4) / (cbWidth - 3) * 100).toFixed(0) that.startx = e.changedTouches[0].pageX; that.starty = e.changedTouches[0].pageY; }) } break; case 4: if (!that.controlbar2Show) { that.controlbarShow = true that.$nextTick(() => { // let cbcWidth = document.getElementById("controlbarcursor").clientWidth let contentWidth = document.getElementById("huadongContent").clientWidth let cbWidth = document.getElementById("controlbar").clientWidth let percentage = cbWidth / contentWidth let angx = that.endx - that.startx; if (that.xPosition <= (cbWidth - 7)) { console.log('座標', that.xPosition) console.log('總長', (cbWidth - 7)) if ((that.xPosition + angx * percentage) > (cbWidth - 7)) { // that.xPosition = cbWidth - 6 that.xPosition = (that.xPosition + angx * percentage) - (cbWidth - 7) } else { that.xPosition = that.xPosition + angx * percentage } } that.brightness = ((that.xPosition + 4) / (cbWidth - 3) * 100).toFixed(0) that.startx = e.changedTouches[0].pageX; that.starty = e.changedTouches[0].pageY; }) } break; default: } } }, false); //手指離開螢幕 document.getElementById("huadongContent").addEventListener("touchend", function(e) { that.controlbarShow = false that.controlbar2Show = false that.silderShow = false }, false); }, methods: { //根據起點終點返回方向 1向上 2向下 3向左 4向右 0未滑動 getDirection(startx, starty, endx, endy) { let angx = endx - startx; let angy = endy - starty; let result = 0; //如果滑動距離太短 if (Math.abs(angx) < 2 && Math.abs(angy) < 2) { return result; } let angle = this.getAngle(angx, angy); if (angle >= -135 && angle <= -45) { result = 1; } else if (angle > 45 && angle < 135) { result = 2; } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { result = 3; } else if (angle >= -45 && angle <= 45) { result = 4; } return result; }, getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Math.PI; } }, }; </script> <style lang="less"> .mask { position: fixed; bottom: 0; top: 0; left: 0; right: 0; background: #000000; z-index: -1; } #huadongContent { position: relative; width: 100%; height: 100%; } .colorTemperature { position: absolute; top: 95px; left: calc(50vw - 154px); img { margin-right: 17px; } } .control_bar { height: 6px; width: 280px; background-image: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0.00) 51%, #FFFFFF 99%); border-radius: 6px; position: relative; } .control_bar_cursor { width: 0; height: 0; border-width: 0 5.5px 8px; border-style: solid; border-color: transparent transparent #FFFFFF; position: absolute; top: -9px; transform: scaleY(-1); } #control_bar_mask { margin-top: -203px; width: 0px; } .brightness { position: absolute; left: 20px; bottom: 90px; img { margin-top: 10px; } } .control_bar2 { height: 240px; width: 8px; opacity: 0.4; background: #FFFFFF; border-radius: 6px; } .control_bar_cursor2 { // height: 8px; width: 8px; background: #FFFFFF; opacity: 1; position: absolute; bottom: 34px; border-radius: 6px; // border-radius: 5px; // margin-top: -12.5px; // position: relative; // top: 0px; // left: 36px; } .control_bar_cursor2:hover { background: white; } #control_bar_mask2 { margin-top: -203px; width: 0px; } .sliderImg { position: fixed; } .numberInfo { position: absolute; top: 20px; width: 100%; .oneNumber { width: 88px; height: 50px; .numberValue { font-family: PingFangSC-Regular; font-size: 17px; color: #FFFFFF; letter-spacing: 0; text-align: center; line-height: 20px; } .numberText { font-family: PingFangSC-Regular; font-size: 12px; color: #FFFFFF; letter-spacing: 0; text-align: center; line-height: 14px; } } } </style>