美文网首页
js实现移动端向左滑动删除效果

js实现移动端向左滑动删除效果

作者: _conquer_ | 来源:发表于2017-10-25 18:46 被阅读0次

使用插件alloy_finger.js

(vue方法使用)

1.引用js

<script src="js/alloy_finger/alloy_finger.vue.js"></script>
<script src="js/alloy_finger/alloy_finger.js"></script>

2.html方法的使用

<div id="container" v-cloak>
  <div v-finger:swipe="swipe" ></div>
</div>

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('向右滑动了');
            }
        }
  }
})

原生

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" 
content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-
scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{
    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;
}
</style>
<script>
//设置html的字体大小,方便使用rem布局
(function(win,doc){
    function change(){
        doc.documentElement.style.fontSize = doc.documentElement.clientWidth*20/320+'px';
    }
    change();
    win.onresize = change;
})(window,document);
</script>
<script>
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<aLi.length;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)
</script>
</head>
<body>
<ul>
    <li><div class="div1">1</div><div class="del">删除</div></li>
    <li><div class="div1">2</div><div class="del">删除</div></li>
    <li><div class="div1">3</div><div class="del">删除</div></li>
    <li><div class="div1">4</div><div class="del">删除</div></li>
    <li><div class="div1">5</div><div class="del">删除</div></li>
    <li><div class="div1">我只是一个单纯的div</div><div class="del">删除</div></li>
    <li><div class="div1">7</div><div class="del">删除</div></li>
</ul>
</body>
</html>

相关文章

网友评论

      本文标题:js实现移动端向左滑动删除效果

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