关于移动端滑动手势

背景:

基于要尝试的移动端项目需要有一个通过上拉下滑手势达成加载不同数据的功能,其涉及到滑动手势和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方面的控制,需要自己再改善。而其他两个例子有给我启发的地方。而且那两个例子的相关讲解也很详细,是值得记录的。

时间: 2024-07-28 21:18:55

关于移动端滑动手势的相关文章

不能遗忘移动端的手势事件

一直游离在pc端开发网站,当然也偶偶将网站制作成响应式的. 但是都没有研究过移动端的手势,上次在ctrip面试的一道题目如今还深深的刻在我的脑海中: 手机上的滑动事件该怎么处理,比如常见的app向右滑动出现菜单? 今天将hammer.js研究了一下,她主要是处理移动端的手势事件的,正如她的ad:Add touch gestures to your page. 我的思路: 1.当手指往右滑动时left块向右移动 2.当手指在红色的left向左滑动时left隐藏 代码如下: <!DOCTYPE ht

iOS-响应上下左右滑动手势

iOS-响应上下左右滑动手势 分类: iPhone开发2012-03-17 14:42 25489人阅读 评论(8) 收藏 举报 iosup -(void)viewDidLoad{ UISwipeGestureRecognizer *recognizer; recognizer = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(handleSwipeFrom:)]; [recognizer setDir

Android 滑动手势简单使用方法

用法:首先让指定的Activity实现Android.view.OnGestureListener,然后在你需要调用GestureDetector的View上,添加onTouchListener,之后setLongClickable(true)即可. 如: customView.setOnTouchListner(xxxListener); customView.setLongClickable(true); 之后就可以在onFling方法中设置你想要的手势. onFling方法参数解释: on

解决ViewPage中嵌套有ListView或者滑动手势等造成滑动的冲突

public class ViewPagerCompat extends ViewPager { //mViewTouchMode表示ViewPager是否全权控制滑动事件,默认为false,即不控制 private boolean mViewTouchMode = false; public ViewPagerCompat(Context context, AttributeSet attrs) { super(context, attrs); } public void setViewTou

初试 vue2.0——9.项目开发_better-scroll 实现移动端滑动2

写在前面的话: 上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧 九.better-scroll + vue2.0 实现移动端滑动2--左右联动 效果:滑动右侧时,左侧也能有相应的变化:点击左侧时,右侧也能自动定位到相应的位置. 如下图所示界面,左侧为分栏,右侧为分栏详情. 滑动右边使左边联动的大概的思路: 1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中. 2)实现左边联动,则必须要监控 "scroll"事件,获取其高度 3)将scroll 的高度与右侧分栏

UIView上的滑动手势及动作

///////////注flowView为UIView////////// //添加滑动手势事件 UIPanGestureRecognizer *gestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:flowView action:@selector(handleGesture:)]; [flowView addGestureRecognizer:gestureRecognizer]; //添加点击手势事件 flow

如何添加ZBLibrary中的底部左右滑动手势

我们可以查看一下以前版本的ASP.NET程序,它是没有Main()函数的,也就是说它没有程序入口点,不是单独的进程.对于应用程序开发来说,这个问题并不大,因为开发者在意的Web程序的逻辑.数据安全等问题,而不是应用程序如何被加载.但对于一个Web框架来说,这个问题非常严重,因为它高度依赖IIS和Windows Server,减少了它的适用范围.如果我们查看ASP.NET Core的程序,你会发现它本质上就是一个控制台程序,如果我们把那些在Main()函数中自动生成的代码都删掉(VS2015的模板

UWP滑动手势

经过近些年智能手机App的不断发展,用户已经不仅仅满足于功能上的需求.UI.设计等非功能点逐渐在App体验中占了大多数的分数.不知从何时起,滑动手势就成为了App的一个标配.他不仅仅是一个功能,更是一个UI设计.其有以下几个优点: 1.方便了单手操作.在当今大屏手机占有率越来越高的趋势下,简洁方便的单手操作模式是很有必要的. 2.美化了UI.你可能会有疑问,这是个功能,为什么美化了UI呢?其实,手势操作的另一个利器就是隐藏了部分不是那么美观的UI,使得界面看上去更简.比如邮件App ,你如果要在

【转】让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支持手势. 然后......自己想办法呗,再然后,就有下面3种解决方案 : jQuery Mobile (http://jquerymobile.com/download/) $("#carousel-generic").swipeleft(function() { $(this).caro