Node.js 기본 왼쪽 슬라이드를 삭제하세요.

이 글은 주로 js의 기본 왼쪽 스와이프 삭제에 대해 소개합니다. 이제 여러분과 공유합니다. 필요한 친구들이 참고할 수 있습니다.

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

위 내용이 이 글의 전체 내용이기를 바랍니다. 모든 분들의 학습에 도움이 될 것입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목해 주세요!

관련 권장 사항:

js의 메서드 복사

React의 PureComponent 소개

위 내용은 Node.js 기본 왼쪽 슬라이드를 삭제하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!