移动端代表性的插件学习

Hammer.js

Hammer.js是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件。它可以实现手势识别--点击、长按、滑动、拖动、旋转、缩放

实例化:
let myHammmer = new Hammer(对象,{配置}) // 实例化Hammer对象myHammmer

常用事件

• tap 点击 快速按下 抬起 时间限制是250ms
• press 点击 按下 ,没抬起 时间超过250ms
• swipe 快速滑动
• pan 按住拖动
• pinch 缩放
• rotate 旋转

myHammer.on('tap',function(){});
myHammer.on('press',function(){});
myHammer.On('swipe',function(){});
myHammer.on('pan',function(){});
myHammer.on('pinch',function(){});
myHammer.on('rotate',function(){});

iscroll.js：移动端滚动插件

html布局：wrapper的第一个子元素content会被设置为可以滚动

实例化：
let iscroll = new IScroll('.wrapper',{配置})

一些配置：

• scrollX(左右拖 默认undefined)
• scrollY(上下拖 默认是true 可以拖)
• startX,startY(滚动区域起始位置(x,y))
• bounce:回弹(默认是true，允许回弹)
• bounceTime: 回弹时间
• freeScroll: 方向锁定(默认是undefined 锁定的)
• mouseWheel: 鼠标滚轮操作(默认true)
• momentum: 物理引擎(默认true是打开的)
• probeType: 有三个参数可选--1,2,3
  1优先级最低，定时器监控
  2优先级高，touchmove监控
  3优先级极高，放弃了transition，直接用JS实现动画(request) 但性能极低 一般选2

事件

• beforeScrollStart:滚动开始之前 鼠标按下
• scrollStart:滚动开始时
• scroll:滚动时 引入iscroll-probe.js文件才能触发调用
• scrollEnd:鼠标松开
• scrollCancel:取消滚动

demo

  
    
    
    
    
  
  
    

      

      
下拉刷新