javascript怎么实现左滑删除

javascript实现左滑删除的方法：1、计算根节点HTML的字体大小；2、初始化根节点HTML的字体大小；3、设置侧滑显示删除按钮；4、通过“event.preventDefault()...”实现左滑删除即可。

本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

javascript怎么实现左滑删除？

纯 js左滑删除功能

代码如下：

!DOCTYPE html>
    html>
    head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, inITial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    title>
    js侧滑显示删除按钮/title>
    style>
*{
    margin:0;
    padding:0;
}
body{
    font-Size:.14rem;
}
li{
    list-style:none;
}
i{
    font-style:normal;
}
a{
    color:#393939;
    text-decoration:none;
}
.list{
    overflow:hidden;
    margin-top:.2rem;
    padding-left:.3rem;
    border-top:1px solid #ddd;
}
.list li{
    overflow:hidden;
    width:120%;
    border-bottom:1px solid #ddd;
}
.list li a{
    display:block;
    height:.88rem;
    line-height:.88rem;
    -webkit-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.list li i{
    float:right;
    width:15%;
    text-align:center;
    background:#E2421B;
    color:#fff;
}
.swipeleft{
    transform:translatex(-15%);
    -webkit-transform:translateX(-15%);
}
    /style>
    script>
//计算根节点HTML的字体大小function resizeRoot(){
        VAR deviceWidth = document.documentElement.clientWidth,        num = 750,        num1 = num / 100;
        if(deviceWidth >
 num){
            deviceWidth = num;
      }
        document.documentElement.style.fontSize = deviceWidth / num1 + "px";
}
    //根节点HTML的字体大小初始化resizeRoot();
window.onresize = function(){
        resizeRoot();
}
    ;
    /script>
    /head>
    body>
    section>
    div class="list">
        ul>
            li>
    a href="#">
    侧滑显示删除按钮1i>
    删除/i>
    /a>
    /li>
            li>
    a href="#">
    侧滑显示删除按钮2i>
    删除/i>
    /a>
    /li>
            li>
    a href="#">
    侧滑显示删除按钮3i>
    删除/i>
    /a>
    /li>
        /ul>
    /div>
    script>
    //侧滑显示删除按钮var expansion = null;
     //是否存在展开的listvar container = document.querySelectorAll('.list li a');
    for(var i = 0;
     i  container.length;
 i++){
            var x, y, X, Y, swipeX, swipeY;
    container[i].addEventListener('touchstart', function(event) {
            x = event.changedTouches[0].pageX;
            y = event.changedTouches[0].pageY;
            swipeX = true;
            swipeY = true ;
        if(expansion){
       //判断是否展开，如果展开则收起            expansion.classname = "";
        }
            }
    );
    container[i].addEventListener('touchmove', function(event){
                    X = event.changedTouches[0].pageX;
            Y = event.changedTouches[0].pageY;
                    // 左右滑动        if(swipeX &
    &
     Math.abs(X - x) - Math.abs(Y - y) >
 0){
                // 阻止事件冒泡            event.stopPRopagation();
                if(X - x >
 10){
       //右滑                event.preventDefault();
                    this.className = "";
    //右滑收起            }
                if(x - X >
 10){
       //左滑                event.preventDefault();
                    this.className = "swipeleft";
       //左滑展开                expansion = this;
            }
                swipeY = false;
        }
            // 上下滑动        if(swipeY &
    &
 Math.abs(X - x) - Math.abs(Y - y)  0) {
                swipeX = false;
        }
            }
    );
}
    /script>
    /body>
    /html>
    

推荐学习：《javascript基础教程》

以上就是javascript怎么实现左滑删除的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！