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>
    

      

  • 相关阅读:
    推荐系统 蒋凡译 第一章 引言 读书笔记
    神经网络与深度学习 邱锡鹏 第5章 卷积神经网络 读书笔记
    神经网络与深度学习 邱锡鹏 第4章 前馈神经网络 读书笔记
    神经网络与深度学习 邱锡鹏 第3章 线性模型 读书笔记
    神经网络与深度学习 邱锡鹏 第2章 机器学习概述 读书笔记
    神经网络与深度学习 邱锡鹏 第1章 绪论 作业
    神经网络与深度学习 邱锡鹏 第1章 绪论 读书笔记
    算法笔记 上机训练实战指南 第13章 专题扩展 学习笔记
    算法笔记 第13章 专题扩展 学习笔记
    算法笔记 上机训练实战指南 第11章 提高篇(5)--动态规划专题 学习笔记
  • 原文地址:https://www.cnblogs.com/yufeiyu/p/10191628.html
Copyright © 2011-2022 走看看