html的swipe滑动事件示例

2024-11-10

移动端前端常见的触摸相关事件touch、tap、swipe

前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gesture手势事件(目前只是一个概念,使用的时候需封装模拟) 使用到的是移动端的Chrome浏览器,本文只对该浏览器进行调试,其他浏览器暂未考虑到一.事件定义及分类 1. click事件单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟 2. t

HTML5滑动（swipe）事件

移动H5开发中经常用到滑动效果(页面上移.下移.向左滑动.向右滑动等),浏览器并没有内置swipe事件,可以通过touch事件(touchstart.touchmove和touchend)模拟swipe效果.jQuery mobile和zeptojs提供了swipe事件.jquery mobile只有swipeLeft和swipeRight,zeptojs提供了完整的tap和swipe事件. /** * @author accountwcx@qq.com * http://git.oschina

wap开发之滑动事件（swipe、tap、swipeleft、swiperight）等

最近一直找在wap端可以实现的swipe等滑动事件的方法,开始研究了jquery-mobile,zepto,结果由于jqm太大.zepto有不少缺陷.为此研究了zepto,想把里面的swipe事件独立出来,结果... 就在一筹莫展的时候,同事推荐了一个jquery-mobile定制版,贴出来,希望给在研究wap站的攻城师有些帮助.如果只要使用其swipe.tap等事件,只要直接选择events下的touch即可.

移动设备、手机浏览器Javascript滑动事件代码

以下经过本人测试成功. 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5 测试了三个事件:touchstart.touchmove 和 touchend,并获取了触摸时触点在页面上的坐标,根据坐标进行了左右滑动.上下滑动判断. 代码如下:  <!DOCTYPE html> <html> <head> <title>TouchEvent测试</title

移动端上下滑动事件之--坑爹的touch.js

下面的方法,不知道是操作方法不对还是啥. 在 zepto.js 里面加那一段代码不起作用百度的 touch.js 是可以用的,但是使用方式和 zepto有点不一样. 解决方案:参照这个链接地址 http://www.cnblogs.com/zhongxia/p/5410478.html ========================================================== 转:http://blog.csdn.net/minidrupal/article/de

移动端图片轮播—swipe滑动插件

swipe是一个轻量级的移动滑动组件,它可以支持精确的触滑移动操作,能解决移动端对滑动的需求. swipe插件的使用主要有四大块: 一.html <div id='slider' class='swipe'> <div class='swipe-wrap'> <div>1</div> <div>2</div> <div>3</div> </div> </div> 1.最外层的div的id

移动端上下滑动事件之--坑爹的touch.js

原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩. 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画. 接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面,坑爹的touch.js的上下滑动( swipe )事件失效. 在举例之前,先科普一下如何在pc端,查看h

简单封装的web里面的tab点击和swipe滑动的小插件

简单封装的一个web的手势,tab和swipe,里面的具体数值都是自定义上去的,没有实际的标准,可以自行去修改都行前两个是详解,js插件在最后一部分代码 ``` //封装web的tab步骤详解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <meta name="viewport

RecycleViewScrollHelper--RecyclerView滑动事件检测的辅助类

目录概述这是一个关于RecycleView滑动事件的辅助类,该辅助类可以检测RecycleView滑动到顶部或者底部的状态. 可用于实现RecycleView加载更多或者刷新(虽然刷新可以直接用SwipeRefreshLayout).也可用于某些滑动相关的需求,如FloatingActionButton的隐藏与显示之类的. 关于RecycleView的滑动监听 RecycleView本身已经提供了滑动的监听接口,OnScrollListener,这个接口包含了以下的方法. //当recycl

iOS开发之多表视图滑动切换示例（仿"头条"客户端）---优化篇

前几天发布了一篇iOS开发之多表视图滑动切换示例(仿"头条"客户端)的博客,之所以写这篇博客,是因为一位iOS初学者提了一个问题,简单的写了个demo做了个示范,让其在基础上做扩展和改进.被CocoaChina中iOS模块所收录实在出乎我的意料,链接地址(http://www.cocoachina.com/ios/20150706/12370.html),在CocoaChina上看了下面的评论,Demo的问题确实有,优化和改进的空间也是蛮大的.首先内存问题是必须考虑的,不能把这么多的T

android 解决ListView点击与滑动事件冲突

如果你的ListView的Item有滑动功能,但又点击Item跳转到其它activity,这样若是在Adapter里面写点击事件是会导致滑动事件获取不到焦点而失效: 解决方法:不要在adapter里面写点击事件,直接添加一下 ListView.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3)

webview滑动事件与内部html左右滑动事件冲突问题的解决办法

最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现,本来是为了增强用户体验,在页面加载的时候可以显示一个转动的图标,但是到了最后,这个功能反而成了影响用户体验的鸡肋, 因为页面中有很多图片, 每次页面显示出来后,图片还没加载完毕,所以加载图标一直在那里转动,影响了用户浏览页面,最后将此功能删除了). 以上基本具备了混合app的雏形,可以拿出来忽悠一

Android判断Touch为滑动事件还是操作控件

Android判断Touch为滑动事件还是操作控件因为在项目中要判断WebView是否处于滚动状态,但它不像ListView有onScrollStateChanged方法来监听,要实现就得手动监听它的Touch事件. 谈起Touch事件不得说提到 onInterceptTouchEvent,它是ViewGroup的一个扩展函数,要实现高级效果必不可少的就需要重写 onInterceptTouchEvent.对所有的 MotionEvent 起到一个过滤的作用,最终的目的是防止一些事件传递到它

JS移动客户端--触屏滑动事件 banner图效果

JS移动客户端--触屏滑动事件移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取

关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧

1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果解决方案:event.preventDefault();//阻止浏览器默认事件即可 2.阻止浏览器默认事件之后发现这添加了滑动事件的dom节点上下滑动也失效,这是一个很坑爹的地方,如果你的活动dom节点占据了整块屏幕,也就是说你的页面上下动不了了: 解决方案:设置两个开关,分别对应左右滑动和上下滑动

android ViewPager滑动事件讲解

首先ViewPager在处理滑动事件的时候要用到OnPageChangeListener OnPageChangeListener这个接口需要实现三个方法:(onPageScrollStateChanged,onPageScrolled ,onPageSelected) onPageScrollStateChanged(int arg0) ,此方法是在状态改变的时候调用,其中arg0这个参数有三种状态(0,1,2).arg0 ==1的时辰默示正在滑动,arg0==2的时辰默示滑动完毕了,a

Android onTouch、OnLongClick、onClick和ScrollView滑动事件冲突

为了实现近期录制的长按,松开手指,结束录制功能.在项目,难道你去走一走会头晕,书写demo为了下一个梳理. 顺便研究android事件调用机制. 先上效果界面: 布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width=&quo

Android 解决Gallery下ScrollView滑动事件冲突

在Gallery下,里面内容过长超出屏幕,这时我们可以用ScrollView来滚动,但是这样做了以后,会发现一个问题,Gallery的滑动事件和ScrollView的滑动事件起冲突,这时我们可以自定义Gallery控件来避免这个问题: 下面贴出代码: import android.content.Context; import android.util.AttributeSet; import android.view.KeyEvent; import android.view.MotionEv

JavaScript在智能手机上的应用-测试是否支持滑动事件

---------------------------- <script type="text/javascript"> //网页加载的回调 function init() { try { document.createEvent("TouchEvent"); alert("

移动端H5开发 (滑动事件)

最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>touch demo</title> <style type="text/css"> #demo{

appium java 滑动（js滑动和swipe滑动）

最近有一个页面的内容很多,有的元素需要滑动到底部才能看到,所以就研究一下滑动,下面是我学习到的两种滑动方式一:用js滑动用js滑动的思路是很简单,首先是先定位到这个元素,定位到之后不做任何操作,然后把Driver实例化为js对象,之后运用 executeScript()方法进行滑动, 具体代码如下面所示: WebElement ele=driver.findElementByLinkText("联系我们");//定位到元素 System.out.println(ele);//打印出

html的swipe滑动事件示例

热门专题