JS实现手机端左滑动出现删除按钮效果

手机端左滑动超过一定距离显示功能按钮，右滑动或点击其他地方隐藏

;(function (window) {window.mymethod = {};
    /*
     * @method: slideToShow 移动端左滑动显示功能（如删除），右滑动隐藏
     * @params: 1. Object 需要滑动 Dom 元素
     *          2. Number 滑动超过这个距离定位到最终位置，未超过吸附回去
     *          3. Number 最终定位位置
     * @return: 无
     * */
    mymethod.slideToShow = function (dom, maxdistance, finalposition) {
        /* 记录起始  刚刚触摸的点的位置  x 的坐标 */
        var startX = 0,
            /* 滑动的时候 x 的位置 */
            moveX = 0,
            /* 滑动的距离 */
            distanceX = 0,
            /* 是否滑动过 */
            isMove = false,
            /* 当前位置 */
            currentX = 0;

        /* 公用方法 */
        /* 加过渡 */
        var addTransition = function () {
            dom.style.transition = "all 0.3s";
            dom.style.webkitTransition = "all 0.3s";
        };
        /* 清除过渡 */
        var removeTransition = function () {
            dom.style.transition = "none";
            dom.style.webkitTransition = "none";
        };
        /* 定位 */
        var setTranslateX = function (translateX) {dom.style.transform = "translateX(" + translateX + "px)";
            dom.style.webkitTransform = "translateX(" + translateX + "px)";
        };
        dom.addEventListener('touchstart', function (e) {startX = e.touches[0].clientX;
        });
        /*
         * 1. 左滑动时，判断滑动距离，如果超过一定距离，定位到最终位置，如果没有，吸附回去
         * 左为负值
         * 2. 右滑动时，首先判断元素是否有滑动值，如果没有，不滑动。如果有，判断滑动距离如果超过一定距离，定位 0，如果没有，定位到滑动前位置
         * 右为正值
         * */
        dom.addEventListener('touchmove', function (e) {
            /* 滑动时候的 X */
            moveX = e.touches[0].clientX;
            /* 计算移动的距离 */
            distanceX = moveX - startX;
            /* 左滑 */
            if (distanceX < 0) {
                /* 清除过渡 */
                removeTransition();
                /* 左滑动范围 -finalposition 到 0*/
                if (-finalposition < (currentX + distanceX) && (currentX + distanceX) < 0) {
                    /* 实时的定位 */
                    setTranslateX(currentX + distanceX);
                }
                /* 证明滑动过 */
                isMove = true;
            } else if (distanceX > 0) {
                /* 右滑 */
                /* 如果当前定位为 0 不滑动 */
                if (currentX == 0) {return false;} else {
                    /* 当前定位不为 0 右滑动范围 -finalposition 到 0*/
                    if (-finalposition < (currentX + distanceX) && (currentX + distanceX) < 0) {
                        /* 实时的定位 */
                        setTranslateX(currentX + distanceX);
                    }
                }
                /* 证明滑动过 */
                isMove = true;
            } else {return false;}
        });
        /* 在模拟器上模拟的滑动会有丢失的情况  在模拟器的时候用 window 绑定 touchend 事件观察效果 */
        window.addEventListener('touchend', function (e) {if (isMove && Math.abs(distanceX) > maxdistance) {
                /* 当滑动超过了一定的距离  需要 定位到最终位置 */
                /* 加过渡 */
                addTransition();
                /* 定位 */
                if (distanceX < 0) { // 左滑
                    setTranslateX(-finalposition);
                    currentX = -finalposition;
                } else { // 右滑
                    setTranslateX(0);
                    currentX = 0;
                }
            } else if (isMove && Math.abs(distanceX) <= maxdistance) {
                /* 当滑动的距离不超过一定的距离的时候  需要吸附回去 */
                /* 加过渡 */
                addTransition();
                /* 定位 */
                if (distanceX < 0) { // 左滑
                    setTranslateX(0);
                    currentX = 0;
                } else { // 右滑
                    setTranslateX(-finalposition);
                    currentX = -finalposition;
                }
            } else {return false;}
            /* 重置参数 */
            startX = 0;
            moveX = 0;
            distanceX = 0;
            isMove = false;
        });
        /* 点击页面任何部位，滑动回去 */
        document.addEventListener('click', function () {
            /* 加过渡 */
            addTransition();
            /* 定位 */
            setTranslateX(0);
        });
    }
})(window);