標籤：app hang gpo console ons cdn div his blog
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app" :class="{‘box‘:isActive}" @touchstart="slideStart" @touchend="slideEnd"> {{ message }}</div><script> var app = new Vue({ el: ‘#app‘, data: { message: ‘Hello Vue!‘, isActive: true }, methods: { slideStart: function (e) { this.startX = e.changedTouches[0].pageX; this.startY = e.changedTouches[0].pageY; }, slideEnd: function (e) { this.endX = e.changedTouches[0].pageX; this.endY = e.changedTouches[0].pageY; this.moveX = this.endX-this.startX; this.moveY = this.endY-this.startY; if (this.moveX > 50) { console.log(‘右‘); } else if (this.moveX < -50) { console.log(‘左‘); }else if (this.moveY > 100) { console.log(‘下‘); }else if (this.moveY < -100) { console.log(‘上‘); } console.log(‘X:‘,this.moveX); console.log(‘Y:‘,this.moveY); } } })</script><style> .box { width: 800px; height: 400px; background-color: gray; }</style></body></html>
移動端滑屏事件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
