# hammer
事件:
- tap 轻击
- press 按压一段时间
- swipe 快速滑动
- swipeleft
- swiperight
- pan 滑动
短信列表实例删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<style media="screen">
* {margin:0; padding:0; list-style:none}
#sms_list {
width:100%;
}
#sms_list li {
width:100%;
position:relative;
height:30px;
line-height:30px;
border-bottom:1px solid #333;
transition:0.6s all ease;
overflow:hidden;
}
#sms_list li a.btn-del {
position:absolute;
right:0;
top:0;
height:100%;
width:0px;
text-align:center;
line-height:30px;
background:#F00;
color:white;
text-decoration:none;
transition:0.3s all ease;
overflow:hidden;
}
#sms_list li a.btn-del span {
width:80px;
display:block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<script>
window.onload=function (){
const sms=[
'asdfsdfbxf多个人头是让他',
'sdydthdfghfghdfg',
'asdfsdfbxf多个人头是让他',
'fhdfghdtfyu',
'asdfsdfbxf多个人头是让他',
'vnmvnmbnm',
'asdfsdfbxf多个人头是让他',
];
let oUl=document.getElementById('sms_list');
let aBtnDel=document.getElementsByClassName('btn-del');
sms.forEach(txt=>{
let oLi=document.createElement('li');
oLi.innerHTML=`<span>${txt}</span><a href="javascript:;" class="btn-del"><span>删除</span></a>`;
oUl.appendChild(oLi);
//
let hammer=new Hammer(oLi);
let oBtnDel=oLi.getElementsByTagName('a')[0];
hammer.on('swipeleft', function (){
Array.from(aBtnDel).forEach(btn=>{
btn.style.width='0px';
});
oBtnDel.style.width='80px';
});
hammer.on('swiperight', function (){
oBtnDel.style.width='0px';
});
oBtnDel.onclick=function (){
oBtnDel.style.width='0px';
oBtnDel.addEventListener('transitionend', function (ev){
oLi.style.height='0px';
oLi.style.borderBottom='0px solid #333';
ev.cancelBubble=true;
oLi.addEventListener('transitionend', function (){
oUl.removeChild(oLi);
});
}, false);
};
});
};
</script>
</head>
<body>
<ul id="sms_list"></ul>
</body>
</html>
创建一个data文件夹，放入1.txt到8.txt文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<script src="jquery.js" charset="utf-8"></script>
<style media="screen">
* {margin:0; padding:0; list-style:none}
.page .nav {width:100%; overflow:hidden; padding: 6px 0; height:14px;}
.page .nav ul {position:relative; overflow:hidden;}
.page .nav ul li {float:left; width:80px; text-align:center; transition:0.6s all ease}
.page .nav ul li.active {color:#F00}
.page .nav ul .line {
position:absolute; left:0; bottom:0; width:80px;
height:1px; background:black; transition:0.6s all ease
}
.page .wrap {width:100%; height:600px; overflow:hidden;}
.page .content {overflow:hidden; height:600px;}
.page .content-item {
width:375px; height:600px; float:left; box-sizing:border-box; border: 1px solid black;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<script>
window.onload=function (){
let oPage=document.querySelector('.page');
let oNav=document.querySelector('.page .nav');
let oNavUl=document.querySelector('.page .nav ul');
let aNavLi=oNavUl.getElementsByTagName('li');
let oContent=document.querySelector('.content');
let aContentItem=document.querySelectorAll('.content-item');
oNavUl.style.width=aNavLi[0].offsetWidth*aNavLi.length+'px';
oContent.style.width=aContentItem[0].offsetWidth*aContentItem.length+'px';
loadData(0);
function loadData(index){
$.ajax({
url: `./data/${index+1}.txt`,
success(txt){
aContentItem[index].innerHTML=txt;
},
error(){
alert('加载失败');
}
});
}
//导航可点击
Array.from(aNavLi).forEach((li,index)=>{
let hammer=new Hammer(li);
hammer.on('tap', function (){
goto(index);
});
});
function goto(n){
Array.from(aNavLi).forEach(li=>li.className='');
aNavLi[n].className='active';
document.querySelector('.line').style.left=aNavLi[n].offsetLeft+'px';
let left=aNavLi[n].offsetLeft-(document.documentElement.clientWidth-aNavLi[n].offsetWidth)/2;
if(left<0){
left=0;
}else if(left>oNavUl.offsetWidth-oNav.offsetWidth){
left=oNavUl.offsetWidth-oNav.offsetWidth;
}
oNavUl.style.transition='0.6s all ease';
oNavUl.style.transform=`translateX(${-left}px)`;
//content
oContent.style.transition='0.6s all ease';
oContent.style.transform=`translateX(${-aContentItem[0].offsetWidth*n}px)`;
function fnEnd(){
oNavUl.style.transition='none';
oContent.style.transition='none';
oNavUl.removeEventListener('transitionend', fnEnd, false);
}
oNavUl.addEventListener('transitionend', fnEnd, false);
loadData(n);
}
//
{
let hammer=new Hammer(oContent);
let start_x,start_y;
let translateX=0,old_translateX;
hammer.on('panstart', function (ev){
start_x=ev.center.x;
start_y=ev.center.y;
old_translateX=translateX;
});
hammer.on('panmove', function (ev){
//假设：就是横向拖
translateX=ev.center.x-start_x+old_translateX;
oContent.style.transform=`translateX(${translateX}px)`;
});
hammer.on('panend', function (){
if(translateX>0){
translateX=0;
}
let n=Math.round(-translateX/aContentItem[0].offsetWidth);
translateX=-n*aContentItem[0].offsetWidth;
goto(n);
});
}
};
</script>
</head>
<body>
<div class="page">
<div class="nav">
<ul>
<li class="active">趣图</li>
<li>推荐</li>
<li>x会</li>
<li>视频</li>
<li>段子</li>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<div class="line"></div>
</ul>
</div>
<div class="wrap">
<div class="content">
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
</div>
</div>
</div>
</body>
</html>