• 滑动删除


    js部分
    var
    container = document.querySelectorAll('.shoppingcar li'); 想要滑动的 元素 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; } }); }
    .swipeleft {
                transform: translateX(-20%);
                -webkit-transform: translateX(-20%);
            }
  • 相关阅读:
    dd命令的巧妙使用
    home目录迁移至新分区
    swap分区的扩展
    搭建多系统yum服务器
    校验软件是否被黑客所修改
    源码编译安装Apache-附一键部署脚本
    yum仓库详细解读
    将FTP映射至Windows
    最简化搭建yum仓库
    校验Linux程序是否被黑客修改
  • 原文地址:https://www.cnblogs.com/nns4/p/7570956.html
Copyright © 2020-2023  润新知