### js判斷手指的上滑,下滑,左滑,右滑,事件監聽
原理:
1:當開始一個touchstart事件的時候,獲取此刻手指的橫坐標startX和staerY;
2:當觸發touchmove事件的時候,再獲取此時手指的橫坐標moveEndX和縱坐標moveEndY;最后,通過兩次獲取的坐標差值來判斷手指在手機屏幕上的滑動方向。
> 實際上手指在手機上面滑動時很難做到直上直下的滑動;只要稍微有點斜,就會被x軸的判斷現行接管,而與我們的實際操作醫院相背離。此時就需要添加特殊的判斷技巧,代碼如下:
```javascript
$("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches\[0\].pageX,
startY = e.originalEvent.changedTouches\[0\].pageY;
});
$("body").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches\[0\].pageX,
moveEndY = e.originalEvent.changedTouches\[0\].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
alert("left 2 right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
alert("right 2 left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
alert("top 2 bottom");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
```
以上代碼,在測試時仍不能達到預期的效果,此時要注意到一個事實--$('body').height = 0;
故還應該在此基礎上添加以下代碼:
```javascript
var windowHeight = $(window).height(),
$body = $("body");
// console.log($(window).height()); //627
// console.log($('body').height()); //0
$body.css("height", windowHeight); //重要代碼
```
以上代碼結合在手機端就可以判斷手指的上滑,下滑,左滑,右滑操作;
- 前端指南
- 基礎
- HTML、HTTP、web綜合問題
- css部分
- 學習指南
- 開發指南
- css指南
- JavaScript
- 視圖、文件
- canvas
- 二維碼的生成
- 64碼及圖片
- weui
- Promise
- 第三方js
- 網絡請求
- 字符串,數組,時間
- 時間類
- Css
- 布局封裝
- 媒體布局
- 九宮格圖片自適應
- 兩行顯示,且省略
- uni-app
- uniapp踩坑指南
- 表單類
- 商品規格
- 頁面操作
- H5端返回按鈕不顯示
- H5解決瀏覽器跨域問題
- uView——Waterfall 瀑布流
- uniapp中使用復制功能(復制文本到粘貼板)
- 動態導航欄的實現
- React
- React基礎
- 微信小程序
- 上傳多圖
- uni-app 微信小程序生成小程序碼二維碼帶參數
- 小程序分享圖片給好友,到朋友圈,保存到本地
- 緩存封裝
- Vue
- 深度作用選擇器deep
- 使用js實現列表無限循環滾動(橫向)
- js 無限循環垂直滾動列表
- 可視化
- AntV
- 玫瑰圖