js native left slide to delete

This article mainly introduces the js native left-swipe deletion, which has a certain reference value. Now I share it with you. Friends in need can refer to it.

比较简单的滑动删除，样式没有细调<style> 
html {
    font-family:微软雅黑;
    font-size:32px;
}
body, div, p, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, select{
    margin:0;
    padding:0;
}
.list{overflow:hidden;margin-top:.2rem;background-color: #fff;}
        .list li{overflow:hidden;width:120%;border-bottom:1px solid #ddd; padding: 0.626rem 0 0.533rem;}
        .list li div{-webkit-transition:all 0.3s linear;transition:all 0.3s linear;position: relative;}
        .swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}
        .qq{display: flex;width: 85%;}
        .ww{display: flex;align-items: center;}
        .header_m img{width: 1.306rem;height: 1.306rem;display: block;}
        .header_t{width: 78%;margin-left: 0.226rem;}
        .law_name{font-size: 0.453rem;color: #333;}
        .msg_c{ font-size: 0.4rem;color: #666; margin-top: 0.133rem; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
        .date{font-size: 0.373rem;color: #838383;float: right;}
        .de{font-size: 0.4rem;color: #fff;background-color: red;height: 40px;line-height: 40px;width:100%;text-align: center;}
</style>

<div class="list">
            <ul>
                <li>
                    <div class="ww" style="display: flex;align-items: center;padding-left:0.333rem">
                        <div class="qq">
                            <div class="header_m">
                                <a href="lawerMsg.html" class="lawyer_head">
                                    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4005596794,992112216&fm=27&gp=0.jpg"/>
                                </a>
                            </div>
                            <div class="header_t">
                                <a href="contacting.html" class="msg">
                                    <p class="law_name">陈律师 <time class="date">2018.1.31 10:00</time></p>
                                    <p class="msg_c">今天出庭谈判关于离婚案问题今天出庭谈判关于离婚案问题今天出庭谈判关于离婚案问题</p>
                                </a>
                            </div>
                        </div>
                        <div class="de">删除</div>
                    </div>
                </li>
            </ul>
        </div>


<script>
    //侧滑显示删除按钮
    var expansion = null; //是否存在展开的list
    var container = document.querySelectorAll(&#39;.ww&#39;);
    for(var i = 0; i < container.length; i++){    
        var x, y, X, Y, swipeX, swipeY;
        container[i].addEventListener(&#39;touchstart&#39;, function(event) {
            x = event.changedTouches[0].pageX;
            y = event.changedTouches[0].pageY;
            swipeX = true;
            swipeY = true ;
            if(expansion){   //判断是否展开，如果展开则收起
                expansion.className = "";
            }        
        });
        container[i].addEventListener(&#39;touchmove&#39;, 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>

The above is the entire content of this article. I hope it will be helpful to you. Everyone’s learning is helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Copying method in js

##Introduction to PureComponent of React

The above is the detailed content of js native left slide to delete. For more information, please follow other related articles on the PHP Chinese website!