美文网首页JS插件
Hammer-移动端触屏插件

Hammer-移动端触屏插件

作者: 小飞侠zzr | 来源:发表于2017-10-20 19:58 被阅读0次

Hammer.js是一个可以实现移动端元素拖拽的库。

//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
var hammertime = new Hammer(document.getElementById("element"));
//为该dom元素指定触屏移动事件
hammertime.on("pan", function (ev) {
注意 pan 的位置可以替换成你想要的效果
其中

pan

   在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件。
   Panstart:拖动开始、Panmove:拖动过程、Panend:拖动结束、Pancancel:拖动取Panleft:向左拖动、Panright:向右拖动、Panup:向上拖动、Pandown:向下拖动

Pinch

   在指定的dom区域内,两个手指(默认为两个手指,多指触控需要单独设置)或多个手指相对(越来越近)移动或相向(越来越远)移动时事件。
    Pinchstart:多点触控开始、Pinchmove:多点触控过程、Pinchend:多点触控结束、Pinchcancel:多点触控取消、Pinchin:多点触控时两手指距离越来越近、Pinchout:多点触控时两手指距离越来越远

PinchArea可以被用在两种方式下:
1.设置一个pinch.target去为对应绑定的对象提供自动接口.
2.使用onPinchStarted,onPinchUpdated,onPinchFinished.
可以参考 PinchEvent.
属性:
enabled : bool
这个属性保存了当前绑定的对象是否接受手势触摸操作.
这个属性默认值是true.
pinch
pinch.target : Item
pinch.active : bool
pinch.minimumScale : real
pinch.maximumScale : real
pinch.minimumRotation : real
pinch.maximumRotation : real
pinch.dragAxis : enumeration
pinch.minimumX : real
pinch.maximumX : real
pinch.minimumY : real
pinch.maximumY : real
pinch提供了一个方便的方式去使得绑定的可见对象对手势做出反应.
pinch.target指定了一个可见对象的Id去拖拽.
pinch.active 如果目标可见对象当前是被拖拽了的话,该值被指定.
pinch.minimumScale 和 pinch.maximumScale 限制了可见对象的范围,但是并不是手势事件的缩放属性.
pinch.minimumRotation 和 pinch.maximumRotation 限制了可见对象的范围.旋转属性,单不是手势事件的旋转属性.
pinch.dragAxis指定了是否拖拽是被允许的.可以是Pinch.XAxis,Pinch.YAxis,Pinch.XAndYAxis.
pinch.minimum和 pinch.maximum 限制了目标可以沿着坐标轴被拖拽多远.
信号:
pinchFinished()
当手势触摸域检测到一个手势已经完成是,该信号被发射出来.
The pinch parameter (not the same as the pinch property) provides information about the pinch gesture, including the scale, center and angle of the pinch.
pinch参数(跟pinch的属性不一样)提供了关于手势的信息,包括缩放因子,中心点,以及角度.
通信句柄是onPinchFinished.
pinchStarted()
当手势触摸域检测到一个手势已经开始:两个触摸点已经被检测到了,并且两个手指已经移动离开了刚开始手指的位置,离开了一段距离,这个信号被发射出来.
pinch参数提供了关于触摸的相关参数(跟pinch属性不一样哟),包括缩放,中心点,以及触摸角度.pinchStarted信号发出的这一刻,这些值被重设成默认值,不管之前的手势结果:pinch.scale被设置为1.0,pinch.rotation被设置为0.0.手势过程中,pinchUpdated将报告从那些默认值出来的偏离值.
忽视手势,设置pinch.accepted属性为false.手势将被取消,并且没有进一步的事件被发送.
通信句柄是onPinchStarted.
pinchUpdated()
当触摸域检测到一个手势改变了时,这个信号被发射出来.
pinch参数提供了关于手势触摸的信息,包括缩放,中心点以及触摸角度.这些值反应了当且仅当开始当前手势时的改变,因此是不会被minimum和maximum限制了触摸属性的.
通信句柄是onPinchUpdated.

Press

   在指定的dom区域内触屏版本的点击事件,这个事件相当于PC端的Click事件,该不能包含任何的移动,最小按压时间为500毫秒,常用于我们在手机上用的“复制、粘贴”等功能。
     Pressup:点击事件离开时触发

Rotate

    在指定的dom区域内,当两个手指或更多手指成圆型旋转时触发(就像两个手指拧螺丝一样)。
    Rotatestart:旋转开始、Rotatemove:旋转过程、Rotateend:旋转结束、Rotatecancel:旋转取消

Swipe

   在指定的dom区域内,一个手指快速的在触屏上滑动。
    Swipeleft:向左滑动、Swiperight:向右滑动、Swipeup:向上滑动、Swipedown:向下滑动

Tap

   在指定的dom区域内,一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒,如果超过250毫秒则按Press事件进行处理。

});

Pinch和Rotate识别器在默认情况下都是禁用的,因为他们会有元素阻塞,但是我们可以手动开启:

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

我们还可以为Pan与Swipe 开启纵向滑动

hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL

相关文章

  • Hammer-移动端触屏插件

    Hammer.js是一个可以实现移动端元素拖拽的库。 //创建一个新的hammer对象并且在初始化时指定要处理的d...

  • TouchSlide 插件使用介绍

    TouchSlide 可用于javascript触屏滑动特效插件,移动端滑动特效,触屏焦点图,触屏Tab切换,触屏...

  • swiper

    swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件,一般用来触屏焦点图、触屏整屏滚动等效果。 s...

  • swiper库入门介绍

    swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件,一般用来触屏焦点图、触屏整屏滚动等效果。 s...

  • 移动端事件

    移动端事件 触屏事件 移动端事件要比PC端要简单的多,移动端主要就有ontouchstart ontouchend...

  • 如何获取swiper中当的索引值

    swiper是纯javaScript打造的滑动特效插件,面向手机、平板电脑、移动终端;能实现触屏焦点图、触屏teb...

  • 精心筹备半年!appium2.0+ 单点触控和多点触控新的解决方

    ♥ 前 言 在 appium2.0 之前,在移动端设备上的触屏操作,单手指触屏和多手指触屏分别是由 TouchAc...

  • vue插件使用之swiper

    Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab...

  • 移动端触屏事件

    什么是触屏事件?移动端的触摸产生的一系列行为; 在移动端,原生触摸事件只有以下三种类型,其他所有的触摸事件都是由这...

  • touch触摸事件

    原声移动端触屏事件touch分为3个事件: touchstart 触摸开始touchmove 触摸移动touc...

网友评论

    本文标题:Hammer-移动端触屏插件

    本文链接:https://www.haomeiwen.com/subject/jwzvuxtx.html