> 웹 프론트엔드 > JS 튜토리얼 > Node.js 기본 왼쪽 슬라이드를 삭제하세요.

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

不言
풀어 주다: 2018-07-09 17:03:24
원래의
1971명이 탐색했습니다.

이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿