|
需求:图片实现镜像翻转和拖拽 遇到的问题：模拟器能够实现，但是在真机运行，点击翻转后坐标值就不正确了 代码如下： <template> <div class="wrapper"> <div class="imgBox" style="top:{{topC+'px'}};left:{{leftC+'px'}};"> <image src="http://test-cdn.dtymxf.com/361/image_template/14/dadihuichun-liebiao.png" class="img" style="transform:scaleX({{scaleX}})" @touchmove="move" ></image> <image src="https://cdn.dtymxf.com/361/image/d1.png" class="turn" @click="overturn"></image> </div> </div> </template> <script> export default { data: { scaleX: 1, topC:100, leftC:100 }, onInit() { }, overturn() { if (this.scaleX == 1) { this.scaleX = -1 } else { this.scaleX = 1 } }, move(event){ event.stopPropagation() let touch = event.touches[0]; console.log(event) this.topC = touch.clientY - 200 this.leftC = touch.clientX - 150 }, } </script> <style> .wrapper { flex-direction: column; justify-content: center; align-items: center; position: relative; } .imgBox{ position: absolute; top: 100px; left: 100px; width: 300px; height: 400px; } .turn{ position: absolute; bottom: 10px; left: 10px; width: 100px; height: 100px; } .img{ width: 300px; height: 400px; } </style> | 
