js原生左滑删除

不言原创: 2018-07-09 17:03:241964浏览
这篇文章主要介绍了关于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原生左滑删除

相关文章
