android 判断滑动方向,H5触摸事件判断滑动方向
為了給觸摸界面提供有力支持, 觸摸事件提供了響應(yīng)用戶對(duì)觸摸屏或者觸摸板上操作的能力.
接口
TouchEvent
TouchEvent 是一類描述手指在觸摸平面(觸摸屏、觸摸板等)的狀態(tài)變化的事件。這類事件用于描述一個(gè)或多個(gè)觸點(diǎn)，使開發(fā)者可以檢測(cè)觸點(diǎn)的移動(dòng)，觸點(diǎn)的增加和減少，等等。每 個(gè) Touch 對(duì)象代表一個(gè)觸點(diǎn); 每個(gè)觸點(diǎn)都由其位置，大小，形狀，壓力大小，和目標(biāo) element 描述。 TouchList 對(duì)象代表多個(gè)觸點(diǎn)的一個(gè)列表.
觸摸事件的類型
為了區(qū)別觸摸相關(guān)的狀態(tài)改變，存在多種類型的觸摸事件。可以通過(guò)檢查觸摸事件的 TouchEvent.type 屬性來(lái)確定當(dāng)前事件屬于哪種類型
touchstart：當(dāng)用戶在觸摸平面上放置了一個(gè)觸點(diǎn)時(shí)觸發(fā)。
touchend：當(dāng)一個(gè)觸點(diǎn)被用戶從觸摸平面上移除(當(dāng)用戶將一個(gè)手指離開觸摸平面)時(shí)觸發(fā)。
touchmove：當(dāng)用戶在觸摸平面上移動(dòng)觸點(diǎn)時(shí)觸發(fā)。
touchcancel：當(dāng)觸點(diǎn)由于某些原因被中斷時(shí)觸發(fā)。
判斷滑動(dòng)方向
基本原理就是記錄開始滑動(dòng)(touchStart)和結(jié)束滑動(dòng)(touchEnd)的坐標(biāo)位置，然后進(jìn)行相對(duì)位置的計(jì)算。
touchStart:function(e){
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
e = e || window.event;
},
touchEnd:function(e){
const that = this;
endX = e.changedTouches[0].pageX;
endY = e.changedTouches[0].pageY;
that.upOrDown(startX,startY,endX,endY);
},
upOrDown:function (startX, startY, endX, endY) {
const that = this;
let direction = that.GetSlideDirection(startX, startY, endX, endY);
switch(direction) {
case 0:
console.log("沒(méi)滑動(dòng)");
break;
case 1:
console.log("向上");
break;
case 2:
console.log("向下");
break;
case 3:
console.log("向左");
break;
case 4:
console.log("向右");
break;
default:
break;
}
},
//根據(jù)起點(diǎn)和終點(diǎn)返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑動(dòng)
GetSlideDirection:function (startX, startY, endX, endY) {
const that = this;
let dy = startY - endY;
let dx = endX - startX;
let result = 0;
//如果滑動(dòng)距離太短
if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
let angle = that.GetSlideAngle(dx, dy);
if(angle >= -45 && angle < 45) {
result = 4;
}else if (angle >= 45 && angle < 135) {
result = 1;
}else if (angle >= -135 && angle < -45) {
result = 2;
}
else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
}
return result;
},
//返回角度
GetSlideAngle:function (dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}
原生JS方法
除了H5新增的方法外，還可以用原生JS判斷view的滑動(dòng)方向，代碼如下(可直接運(yùn)行)：
要注意的是chrome對(duì)document.body.scrollTop一直是0，需要改成document.documentElement.scrollTop
菜鳥教程(runoob.com)div {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
function scroll( fn ) {
var beforeScrollTop = document.documentElement.scrollTop,
fn = fn || function() {};
console.log('beforeScrollTop',beforeScrollTop);
window.addEventListener("scroll", function() {
var afterScrollTop = document.documentElement.scrollTop,
delta = afterScrollTop - beforeScrollTop;
console.log('beforeScrollTop',beforeScrollTop);
console.log('afterScrollTop',afterScrollTop);
if( delta === 0 ) return false;
fn( delta > 0 ? "down" : "up" );
beforeScrollTop = afterScrollTop;
}, false);
}
scroll(function(direction) { console.log(direction) });
總結(jié)
以上是生活随笔為你收集整理的android 判断滑动方向,H5触摸事件判断滑动方向的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： android 城市列表数据,用Recy
- 下一篇： 华为鸿蒙发布会新手机,曝华为 P50/P