js diapositive gauche native à supprimer

Cet article présente principalement la suppression native par balayage vers la gauche de js, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

比较简单的滑动删除，样式没有细调<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>

Ce qui précède est l'intégralité du contenu. de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Méthodes de copie en js

Introduction à PureComponent de React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!