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会被设置为可以滚动
<div class="wrapper">
<div class="content"></div>
</div>
实例化：
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=1.0,maximum-scale=1.0">
<title>iscroll</title>
<style media="screen">
body,div{margin:0;padding:0;}
body{overflow-x: hidden;}
.wrapper {
position: relative;
margin: 50px auto;
overflow: hidden;
width: 500px;
height: 500px;
background: #ccc;
}
.content {
position: relative;
z-index: 3;
width: 2000px;
height: 2000px;
background: -webkit-linear-gradient(red,yellow);
}
.dropload {
position: absolute;
z-index: 2;
width: 100%;
top: 0;
left: 0;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
<div class="dropload">下拉刷新</div>
</div>
<script src="iscroll-probe.js" charset="utf-8"></script>
<script type="text/javascript">
let iscroll = new IScroll(".wrapper",{ // 创建实例
scrollX: true,
probeType: 2
});
let drop = document.querySelector(".dropload");
let releaseY = 0;
iscroll.on("scrollStart",function(){
releaseY = 0;
});
iscroll.on("scroll",function(){
if(iscroll.y>=80){
drop.innerHTML = "松手刷新";
}else{
drop.innerHTML = "下拉刷新";
}
releaseY = iscroll.y;
});
iscroll.on("scrollEnd",function(){
if(releaseY>=80){
alert("刷新");
}else{
alert("不刷新");
}
})
</script>
</body>
</html>
