zoukankan      html  css  js  c++  java
  • 移动端侧滑删除demo

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>js侧滑显示删除按钮</title>
    <style>
    *{margin:0;padding:0;}
    body{font-size:.3rem;}
    li{list-style:none;}
    i{font-style:normal;}
    a{color:#393939;text-decoration:none;}
    .list{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid #ddd;}
    .list li{overflow:hidden;100%;border-bottom:1px solid #ddd;}
    .list li a{position:relative;display:block;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}
    .list li i{position: absolute;right: -30%;top: 0; 30%;text-align:center;background:#E2421B;color:#fff;display: flex;flex-direction: row;}
    .swipeleft{transform:translateX(-30%);-webkit-transform:translateX(-30%);}
    .del{
    	display: inline-block;
        3rem;
        height:100%;
        background:#ccc;
        float:left;
        text-align: center;
        line-height:.88rem;
        color:#fff;
    }
    .chuli{
    	display: inline-block;
        4rem;
        height:100%;
        background:lightblue;
        float:left;
        text-align: center;
        line-height:.88rem;
        color:#fff;
    }
    </style>
    <script>
    //计算根节点HTML的字体大小
    function resizeRoot(){
        var deviceWidth = document.documentElement.clientWidth,
            num = 750,
            num1 = num / 100;
        if(deviceWidth > num){
            deviceWidth = num;  
        }
        document.documentElement.style.fontSize = deviceWidth / num1 + "px";
    }
    //根节点HTML的字体大小初始化
    resizeRoot();
    
    window.onresize = function(){
        resizeRoot();
    };
    </script>
    </head>
    <body>
    <section>
    <div class="list">
    	<ul>
    		<li><a href="#" onclick="return false">侧滑显示删除按钮1<i> <span class="chuli">去办理</span><span class="del">删除</span></i></a></li>
    		<li><a href="#" onclick="return false">侧滑显示删除按钮2<i> <span  class="chuli">去办理</span><span class="del">删除</span></i></a></li>
    		<li><a href="#" onclick="return false">侧滑显示删除按钮3<i> <span  class="chuli">去办理</span><span class="del">删除</span></i></a></li>
    	</ul>
    </div>
    <script>
    //侧滑显示删除按钮
    var expansion = null; //是否存在展开的list
    var container = document.querySelectorAll('.list li a');
    var oUl=document.querySelector('ul');
    var aLi=document.querySelectorAll('li');
    var aDel=document.querySelectorAll('.del');
    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;
            }        
        });
            aDel[i].index=i;
            aDel[i].onclick = function(){
    //      this.parentNode.parentNode.remove();
      		event.preventDefault();
       		oUl.removeChild(aLi[this.index]);
        };
           
    }
    
    //var span = document.querySelectorAll('.list li i span');
    //i.forEach(function(item, index){
    //  i[index].onclick = function(){
    //      this.parentNode.parentNode.remove();
    //  };
    //});
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    Jaeger Client Go 链路追踪|入门详解
    Go 中的 gRPC 入门详解
    【五分钟】001-数据结构概论
    【重榜?】.NET 6 Preview 1 开箱上手!带你尝试新版本更新!
    分布式链路追踪框架的基本实现原理
    【网摘】SQL练习题
    【数据库】E-R图向关系模型转换的规则
    6.0 《数据库系统概论》之关系数据库的规范化理论(数据依赖对表的影响[插入-删除-修改-冗余]、1NF-2NF-3NF-BCNF-4NF、函数依赖与多值依赖)
    【数据库】入门基础概念以及部分题目 记录 +答案+个人分析
    5.0 数据库完整性详解(PRIMARY KEY、REFERENCES、CHECK、CONSTRAINT、DOMAIN、TRIGGER)
  • 原文地址:https://www.cnblogs.com/yufeiyu/p/10191628.html
Copyright © 2011-2022 走看看