关于移动端滑动手势

Posted 2020-10-04

背景：

基于要尝试的移动端项目需要有一个通过上拉下滑手势达成加载不同数据的功能，其涉及到滑动手势和ajax数据加载方面的知识点。故对整个实现过程做一个记录整理。个人JS功底有限，看了诸多例子和对于移动端手势知识点梳理的技术博客才对做到了对功能的实现。并且也在这个过程中，才初步了解到了移动端框架Zepto.js。_(:з」∠)_ 当然，最后还是选择了尽量用原生来实现这一个功能，只因为这样才能够对整个功能实现原理理解上更充分些，想尽量少依赖于插件。不过到了数据加载上，因为时间成本等原因最后还是用上了JQuery来实现ajax的部分。

 

描述：通过单手指向下或向上滑动，上一周或下一周数据刷新，加载出当前周数页面的上一周或下一周数据信息。

实现：1.获取手指触碰到屏幕时的坐标 (x，y)；

　　　2.在限定单手指触碰的大前提下再获取移动后手指在屏幕的坐标位置(x1，y2)；

　　　3.使用if来控制坐标 (x，y)与结束坐标(x1，y2)之间的垂直与水平数值差距，将滑动范围限定起来；

　　　4.符合条件的可加载出相应指定数据。

 

相关链接：

原生JS实现触摸滑动事件 http://dobit.top/Detail/109.html

玩转H5上拉下滑动效 https://isux.tencent.com/h5-drop-down-effect-slide.html

开源移动端元素拖拽惯性弹动以及下拉加载两个JS http://www.zhangxinxu.com/wordpress/2017/01/mobile-phone-drag-drop-inertia-loading/

 

基本是简化了 原生JS实现触摸滑动事件 的代码来实现滑动动效的。并且关于if方面的控制，需要自己再改善。而其他两个例子有给我启发的地方。而且那两个例子的相关讲解也很详细，是值得记录的。