1、目的：判断手指是上滑还是下滑

2、原理：获取手指按下时的Y坐标和手指抬起的Y坐标。如果抬起的坐标小于按下的坐标，则是上滑；抬起时的坐标大于按下时的坐标，则是下滑；

3、代码示例：

<script type="text/javascript">
            var startY = 0;
            document.addEventListener("touchstart",function(e){
                startY = e.changedTouches[0].pageY;
            },false);
            document.addEventListener("touchend",function(e){
                var endY = e.changedTouches[0].pageY;
                var changeVal = endY - startY;
                if(endY < startY){//向上滑
                    alert("向上滑");
                }else if(endY > startY){//向下滑
                    alert("向下滑");
                }else{
                    alert("没有偏移");
                }
            },false);
        </script>

（我有免费的移动端、JavaScript学习视频，想要的鞋童们可以加我微信）

移动端判断手指上滑下滑相关推荐

  1. js判断手指上滑和下滑

    <script>var startX = 0,startY = 0;function touchStart(evt){try{var touch = evt.touches[0], //获 ...

  2. vue下拉触底，判断上滑下滑

    下拉触底 常用参数 scrollHeight(文档内容实际高度,包括超出视窗的溢出部分). scrollTop(滚动条滚动距离). clientHeight(窗口可视范围高度). 当 clientHe ...

  3. 滑动事件判断(手指上划、下滑/左滑、右滑)

    需求描述:手指向上滑动pushpage向上变长 图片 代码如下 /*wxss*/ /* 可拉动页面 */ .pushpage{width: 750rpx;height: 700rpx;/* backg ...

  4. 微信小程序监听屏幕上滑下滑事件

    需求是在list页中带有搜索框,下滑时隐藏顶部输入框,上滑时显示输入框,提高一点点用户体验.避免想要搜索就必须上滑至顶部.. 实现: 首先输入框得固定在顶部. wxml:class="sea ...

  5. recyclerview滑动到顶部和底部监听+上滑下滑监听

    到达顶部和底部监听 判断是否滑动到底部, recyclerView.canScrollVertically(1);返回false表示不能往上滑动,即代表到底部了: 判断是否滑动到顶部, recycle ...

  6. uniapp监测用户左滑右滑上滑下滑事件

    定义组件 定义的该组件名称 swiper-direct-com(自己可以随便命名) <template><view class="wrapper" @touchs ...

  7. js实现上滑下滑翻页

    移动端h5页面上下滑动翻页 <!DOCTYPE html> <html> <head><meta charset="UTF-8">& ...

  8. 上滑下滑动画切换两个activity

    两个activity互相切换,第一个activity向上滑出页面,第二个从底部滑入.返回时,第二个滑回底部,第一个从页面上部滑入屏幕 自定义了四个动画 in_from_down.xml <?xm ...

  9. ListView 条目加载上滑下滑首尾缩放动画实现

    要实现这个效果,只需要再适配器getView之前,给每个条目的view设置相应的动画即可. 首先需要2个动画的xml文件. 在res下新建anim文件夹:(res/anim) 第一个动画xml文件: ...

最新文章

  1. gcc/g++等编译器 编译原理： 预处理，编译，汇编，链接各步骤详解
  2. 解决： -bash: $‘\302\240docker‘: command not found
  3. 搜索文献_如何有效地搜索及阅读文献
  4. 2020，这些前沿技术成全球关注热点
  5. Linux7使用光盘作为本地repo源
  6. android camera（1）--- 高通平camera基本架构
  7. mvc上传图片(上传和预览)webuploader
  8. 导入新项目报错 Hibernate提示:No generator named ID_GENERATOR is defined in the persistence unit
  9. OSChina 周日乱弹 ——程序员被辞退的理由
  10. 关于高等数学、线性代数、数理统计和概率论
  11. cryptojs php 互通_AES 加密解密 CryptoJS + php 方案
  12. 微软应用商店安装包_微软苦恼了！微博UWP客户端停止服务：大家都用浏览器去了？...
  13. SpringCloud day12
  14. [坐标纠偏] WGS84转GCJ02、BD09，GCJ02转BD09总结
  15. php qq邮箱验证码不显示图片,qq邮箱邮件图片不显示怎么解决-解决qq邮箱邮件图片不显示的方法 - 河东软件园...
  16. K-mean clustering（K均值聚类算法）
  17. 2017年下半年计算机二级报名,2017河北大学下半年计算机二级报名时间
  18. [长期更新]相似单词对比
  19. java技术晨讲可以讲什么内容,晨讲和晨测都是提升郑州达内小伙们技能的好方法...
  20. 你可曾知道，Java为什么需要虚拟机？

热门文章

  1. 智驾科技招聘|SLAM算法总监、感知定位、高精地图等岗位（20~50K）
  2. NR LDPC 04 -definition, Tanner and Protograph Constructions
  3. hyperMILL自动程序单后处理刀库模板制作视频教程
  4. 机电一体化c语言程序设计,求助机电一体化程序设计的题
  5. Matlab 电磁波垂直入射、透射和反射
  6. 【c语言】求 1000 以内全体素数之和
  7. channelarlist_易优CMS：channelartlist 获取当前频道的下级栏目的内容列表
  8. 程序员的价值观——经验是无价之宝
  9. 互联网医院网络安全等保建设方案（附PPT全文）
  10. 机器学习(五)：深入浅出PCA降维