比较简单的滑动删除,样式没有细调
<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('.ww'); for(var i = 0; i < container.length; i++){ var x, y, X, Y, swipeX, swipeY; container[i].addEventListener('touchstart', function(event) { x = event.changedTouches[0].pageX; y = event.changedTouches[0].pageY; swipeX = true; swipeY = true ; if(expansion){ //判断是否展开,如果展开则收起 expansion.className = ""; } }); container[i].addEventListener('touchmove', 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>