vue+hammer.js完美实现长按、左滑，右滑等触控事件

移动端使用手指直接操作的方式大受用户欢迎,这其中就包括了单点.多点.长按.双击等方式. 这么多触控事件,如果开发者自己实现,会浪费大量的时间和精力,快来看看 hammer.js 让我们轻松了多少吧. 使用下面的方法vue+hammer.js完美的结合在了一起,对于体验很不错.长按删除后无需再次请求服务器,直接在vue中移除数组! <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> &l…

Android SwipeToDismiss：左滑/右滑删除ListView条目Item

<Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(github上的项目链接地址:https://github.com/romannurik/Android-SwipeToDismiss ).该开源项目旨在:使得一个ListView的item在用户的手指在屏幕上左滑或者右滑时候,删除当前的这个ListView Item. 此种特效在新版的Android中应用不少.比方在…

ViewPager 滑动一半的判断方法以及左滑右滑判断

做项目的时候,会碰到用viewpager + fragments去实现多页滑动.有些时候需要完成:界面在滑动到一半或是一半以上的时候,需要把title之类的切换到下一个页面.这个时候仅仅依赖Viewpager的接口是不能判断,这里提供一个方法:判断viewpager是左滑还是右滑,同时对滑过一半的时候(这个参数可以调),进行相关操作. //定义两个变量,这个两个变量是表示滑动时候,positionOffset 是从大到 //小的变化,还是从小到大的变化.用于在滑动时候,避免多次调用一个方法 pr…

移动端h5禁用浏览器左滑右滑的前进后退功能

在项目运行过程中发现,用户在有左右滑动前进后退的功能的浏览器上签字时,偶然触发了前进后退会导致canvas像是重置了一样内容消失,所以需要在代码中处理这种情况. 基本原理就是在touchmove事件中阻止默认事件,使浏览器不会触发前进后退事件,但是也会无法触发scroll事件让页面正常滚动,后续如何让页面能正常滚动就会有多种思路. 参考https://www.cnblogs.com/Miracle-ZLZ/p/7852421.html文中第5点推荐使用IScroll,但看了一下github发现太…

Hammer.js

一.前言移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqery.Jquery2.0版本及以上已经开始偏向移动端,如对h5的支持,但支持还是不够完善,希望jq在后面的版本能够逐渐支持起来. 最初在开发移动端Web的时候使用w3c标准的语法结构和原生的js开发,但相对来说开发量比较大,而且每一步都要考虑各移动端浏览器的兼容,像比较让程序员头痛的大wp手机,很多事…

Hammer.js——给bootstrap添加触屏功能

Hammer.js qq群号(html5技术交流):158677025 手机端演示二维码(或直接在手机中输入网址:http://lilinfeng.cncoder.me 浏览效果): 一.前言移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqery.Jquery2.0版本及以上已经开始偏向移动端,如对h5的支持,但支持还是不够完善,希望jq在后面的版本能够…

H5案例分享：JS手势框架 —— Hammer.js

JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许同时监听多个手势.自定义识别器,也可以识别滑动方向. 二.事件 1.Rotate事件:在指定的dom区域内,当两个手指或更多手指成圆型旋转时触发(就像两个手指拧螺丝一样).该事件分别对以下事件进行监听并处理: Rotatestart:旋转开始:Rotatemove:旋转过程:Rotateend:旋转…

hammer.js的六大事件

1.Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在触屏开发中比较常用: Panstart 拖动开始 Panmove 拖动过程 Panend 拖动结束 Pancancel 拖动取消 Panleft 向左拖动 Panright 向右拖动 Panup 向上拖动 Pandown 向下拖动 2.Pinch事件: 在指定的dom区域内,两个手指(默认为两个手指,多指触控需要单独设置)或多个手指相对(越来越近)移动或相向(越来越远)移动时的事件: Pinstart 多…

Taro UI开发小程序实现左滑喜欢右滑不喜欢效果

前言:年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到对应的插件,相关博客也特别少,所以没做就搁置下来了,趁这段时间相对来说比较富裕,于是乎在网上也搜索了一下,发现确实很少,但是有人提到可以用小程序可拖动组件movable-view来实现,自己尝试来一下发现可行,于是来写这篇博客记录一下,希望能帮助到后面需要用到这个功能的人! 先上效果图: 主要技术:…

js 正则学习小记之左最长规则

原文:js 正则学习小记之左最长规则昨天我在判断正则引擎用到的方法是用 /nfa|nfa not/ 去匹配 "nfa not",得到的结果是 'nfa'.其实我们的本意是想得到整个字符串 "nfa not" 的,可却只得到了 'nfa'. 再来看个例子,/an (nfa)?(nfa test)?/ 去匹配 "an nfa test",如果和上面一样的解释,那应该只得到 'an nfa',接着第一个捕获组里是 'nfa' 第二个捕获组里是空. 我…

Hammer.js移动端触屏框架的使用

hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.touchend事件并且写一大堆判断逻辑的痛苦.hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试.这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档. 使用方法: 1 2 3 4 5 6 7 8…

插件: Hammer.js

官网: http://hammerjs.github.io/ hammer.js 官网 http://hammerjs.github.io/api/ 官网API(官网写的实在太简了!不好用.注意里面关键字,另外还得搜索引擎查相关文章) 2015-12-9 下载: http://hammerjs.github.io/dist/hammer.js http://hammerjs.github.io/dist/hammer.min.js 下载hammer.js v2.0.4 2015-11-1…

移动端手势事件 hammer.JS插件

一.引入hammer.JS 1.下载地址:http://download.csdn.net/detail/webxiaoma/9872249 2.官网地址:http://hammerjs.github.io/examples/ 3.CDN链接:http://hammerjs.github.io/dist/hammer.min.js 二.用法 1.首先我们先写一个出发事件的DOM元素 HTML: <style type="text/css">…

hammer.js触摸,手指缩放等许多手势操作

使用方法: 插件描述:Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件. <script src="http://eightmedia.github.com/hammer.js/hammer.js"></script> // 先要对监听的DOM进行一些初始化 var hammer = new Hammer(document.getElementById("container"…

Hammer.js分析（三）——input.js

input.js是所有input文件夹中类的父类,浏览器事件绑定.初始化特定的input类.各种参数计算函数. Input父类和其子类就是在做绑定事件,各种参数计算.整合.设置等返回自定义事件对象,交给识别器的相关对象使用. 一.Input父类 Input相当于一个抽象类,对象中总共有3个方法 1)handler(ev) 这相当于一个抽象方法,在上图中的6个子对象里,都会实现这个方法. ev是事件对象(不是自定义的那个),例如触屏事件中就是 TouchEvent. 2)init()与destro…

利用轮播原理结合hammer.js实现简洁的滑屏功能

最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西来实现.最后我用zepto + hammer.js 和轮播的方式解决了这个问题,效果还不错,整个页面不开启Gzip时所有资源请求的数据大小为200KB左右.这篇文章总结下这个方法的实现思路. 效果演示(代码下载): 1. 实现要点 1)滑屏借鉴bootstrap的carousel插件,不过完全没有它…

hammer.js手势库使用

hammer.js是一款移动端手势库组件,支持pan(拖动).swipe(滑动).tap(轻触).press(按压,即长按).doubletap(双击)等很多手势操作,提供比较完善的事件监听机制,但是使用的时候遇到很多事件官方默认没有开启,比如想要同时使用单击.双击.按压事件,必须设置如下: var hammer = new Hammer.Manager(document.getElementById("swiper-wrapper")); hammer.add( }) ); hamm…

移动开发框架，Hammer.js 移动设备触摸手势js库

hammer.js是一个多点触摸手势库,能够为网页加入Tap.DoubleTap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.touchend事件并且写一大堆判断逻辑的痛苦.hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试.这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档. 使用方法: http://eightmedi…

移动端手势库Hammer.js学习

感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 近日学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别出常见的触摸.拖动.长按.缩放等行为. 依照官方文档,开始学习吧一.基本用法在页面上用<script>标签引用 http://hammerjs.github.io/dist/hammer.min.js 或将其下载使用 1. 页面结构: <style type="text/cs…

移动开发框架，第【二】弹：Hammer.js 移动设备触摸手势js库

使用Hammer.js的H5页面开发DOM的一些小说法

前几天,一个小伙伴说叫我帮他写一个移动端上的一个轮播图,个人一般是不接私活的,毕竟平时工作也是单双休,时间也不很多. 可能大部分程序员,多余的时间都是看看新闻,打游戏,或者学习新的知识,缺少运动吧. 所以,个人感觉接私活那点时间,你可以去锻炼身体,或者学习新的知识,当然这些都是看法,完全不代表你跟我有一样的看法,好吧,不过既然是朋友,以前也是同学,而且不就是一个轮播图吗,自己也写过一些移动端里,轮播图是移动端上最常见的一个广告展示功能. 但是,当小伙伴把大致的需求高速了我以后,完全跟轮播图没有,…

多点触控插件Hammer.js

插件描述:Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件. 使用方法: <script src=<span class="string" style="color: rgb(221, 17, 68);">"http://eightmedia.github.com/hammer.js/hammer.js"</span>></script&…

js实现Mac触摸板双指事件（上、下、左、右、放大、缩小）

前言这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠标滚轮支持), 给得太简单,没有处理Mac双指行为,所以不能用. 目标获取Mac触摸板双指行为,具体有两个,一个是实时拖动路线,二是手势(上.下.左.右.放大.缩小). 难点双指行为只会触发mousewheel事件,其他什么的touch,mouse都不会触发,只能从这个下手. 双指特性 1.在快…

hammer.js初探

hammer.js官方文档 hammerjs是什么 hammerjs是一个短小精悍的库,他可以让我们轻松的实现移动端上的手势. hammerjs的两大优势如下: 为移动端网页添加相关手势. 去除移动端上的点击事件的300ms延迟. 为什么使用hammerjs 诚然,我们可以通过touch的四个事件等来完成相同的功能,但是不可避免的会比较麻烦,所以既然前人已经造了这个好轮子,为什么不去使用呢? 另外,300ms的延迟有时是我们不需要的,比如,我们在做webapp时,不需要页面的缩放,而300ms的…

Hammer.js 移动端手势库，多点触控插件

jquery用法: 引入3个JS:<script src="jquery.js"></script> <script src="hammer.js"></script> <script src="jquery.hammer.js"></script> $(".myElement").hammer().bind("tap", functi…

认识hammer.js

hammerjs是什么 hammerjs是一个短小精悍的库,他可以让我们轻松的实现移动端上的手势. hammerjs的两大优势如下: 为移动端网页添加相关手势. 去除移动端上的点击事件的300ms延迟. 为什么使用hammerjs 诚然,我们可以通过touch的四个事件等来完成相同的功能,但是不可避免的会比较麻烦,所以既然前人已经造了这个好轮子,为什么不去使用呢? 另外,300ms的延迟有时是我们不需要的,比如,我们在做webapp时,不需要页面的缩放,而300ms的延迟就是为了webapp的缩…

Hammer.js 实现移动端元素的拖拽库

1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对以下事件进行监听并处理: Panstart:拖动开始.Panmove:拖动过程.Panend:拖动结束.Pancancel:拖动取消.Panleft:向左拖动.Panright:向右拖动.Panup:向上拖动.Pandown:向下拖动 2. Pinch事件:在指定的dom区域内,两个手指(默认为两个…