### 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
- 玫瑰图