使用插件alloy_finger.js
(vue方法使用)
1.引用js
2.html方法的使用
3.js方法的使用
Vue.use(AlloyFingerVue);
var vm=new Vue({
el:'#container',
methods:{
swipe:function(e){
console.log(e);
var _content = md_lib.parents(e.target,'cart_item_content');
if (e.direction == 'Left') {
console.log('向左滑动了');
}
if (e.direction == 'Right') {
console.log('向右滑动了');
}
}
}
})
原生
content="IE=edge,chrome=1">
Examplescontent="width=device-width, user-scalable=no, initial-
scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
*{
margin: 0;
padding: 0;
list-style: none;
}
body,html{
height: 100%;
width:16rem;
overflow:hidden;
}
ul{
width:16rem;
height:28.4rem;
}
li{
width:20rem;
height:2rem;
line-height: 2rem;
background:pink;
}
.div1{
width:16rem;
height:2rem;
float:left;
}
.del{
width:4rem;
height:2rem;
background:red;
float:left;
text-align: center;
line-height: 2rem;
color:#fff;
}
//设置html的字体大小,方便使用rem布局
(function(win,doc){
function change(){
doc.documentElement.style.fontSize = doc.documentElement.clientWidth*20/320+'px';
}
change();
win.onresize = change;
})(window,document);
document.addEventListener('DOMContentLoaded',function(){
var oUl=document.querySelector('ul');
var aLi=document.querySelectorAll('li');
var aDiv=document.querySelectorAll('.div1');
var aDel=document.querySelectorAll('.del');
var n=0;
for(var i=0;i
console.log(i);
aLi[i].index=i;
//滑动开始
aLi[i].addEventListener('touchstart',function(ev){
ev.preventDefault();
var oldX=ev.targetTouches[0].pageX;
console.log(oldX);
function fnMove(ev){
ev.preventDefault();
var newX=ev.targetTouches[0].pageX-oldX;
aLi[this.index].style.transform='translateX('+newX+'px)';
}
function fnEnd(ev){
aLi[this.index].removeEventListener('touchmove', fnMove,false);
aLi[this.index].removeEventListener('touchend', fnEnd,false);
ev.preventDefault();
var changeX=ev.changedTouches[0].pageX;
if(oldX-changeX > 40){
aLi[this.index].style.transition='1s all ease';
aLi[this.index].style.transform='translateX(-4rem)';
}else{
aLi[this.index].style.transform='translateX(0)';
}
}
aLi[this.index].addEventListener('touchmove', fnMove,false);
aLi[this.index].addEventListener('touchend', fnEnd,false);
},false)
//删除按钮
aDel[i].index=i;
aDel[i].addEventListener('touchstart', function(){
this.innerHTML='';
this.style.height='0';
this.style.transition='0.5s all ease';
aLi[this.index].style.height='0';
aLi[this.index].style.transition='0.5s all ease';
aDiv[this.index].style.height='0';
aDiv[this.index].style.transition='0.5s all ease';
aDiv[this.index].innerHTML='';
this.addEventListener('transitionend',function(){
oUl.removeChild(aLi[this.index]);
}, false)
},false)
}
},false)
-
1删除
-
2删除
-
3删除
-
4删除
-
5删除
-
我只是一个单纯的div删除
-
7删除