移动端列表项左滑删除功能

        //左滑删除
        var lines = $(".itme1_content li");//左滑对象
        var len = lines.length;
        var lastXForMobile;//上一点位置
        var pressedObj;  // 当前左滑的对象
        var lastLeftObj; // 上一个左滑的对象
        var start;//起点位置

        for (var i = 0; i < len; ++i) {
            lines[i].addEventListener('touchstart', function (e) {
//                e.preventDefault();//加上这句的话删除按钮就无法点击了
                lastXForMobile = e.changedTouches[0].pageX;
                pressedObj = this; // 记录被按下的对象

                // 记录开始按下时的点
                var touches = event.touches[0];
                start = {
                    x: touches.pageX, // 横坐标
                    y: touches.pageY  // 纵坐标
                };
            });

            lines[i].addEventListener('touchmove', function (e) {
                // 计算划动过程中x和y的变化量
                var touches = event.touches[0];
                delta = {
                    x: touches.pageX - start.x,
                    y: touches.pageY - start.y
                };
                // 横向位移大于纵向位移,阻止纵向滚动
                if (Math.abs(delta.x) > Math.abs(delta.y)) {
                    event.preventDefault();
                }
                if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
                    $(lastLeftObj).css({'transform': 'translateX(0px)'}); // 右滑
                    lastLeftObj = null; // 清空上一个左滑的对象
                }
                var diffX = e.changedTouches[0].pageX - lastXForMobile;
                if (diffX < -50) {
                    $(pressedObj).css({'transform': 'translateX(-80px)'}).siblings('li').css({'transform': 'translateX(0px)'}); // 左滑
                    lastLeftObj = pressedObj; // 记录上一个左滑的对象
                } else if (diffX > 50) {
                    if (pressedObj == lastLeftObj) {
                        $(pressedObj).css({'transform': 'translateX(0px)'});// 右滑
                        lastLeftObj = null; // 清空上一个左滑的对象
                    }
                }
            });

            lines[i].addEventListener('touchend', function (e) {
            });
        }
        // 点击删除
        mui("#refreshContainer").on('tap', '.li-delete', function (event) {
            this.click();
            event.stopPropagation();//阻止li事件的点击
            var li_delete = $(this).parents('li');
            var li_height = $(this).parents('li').height();
            var add_height = li_height + 1;
            var msg = confirm("是否确认删除?");
            if (msg == true) {
                $.post('/ist/fd_delete_item', {'data': $(this).attr('data')}, function (r) {
                    if (1 == r.status) {//以下是删除动画可忽略
                        li_delete.css({'opacity': '0'},200);
                        li_delete.css({"height": add_height});
                        setTimeout(function () {
                            li_delete.css({"height": 0}, 3000);
                            setTimeout(function () {
                                li_delete.remove();
                            }, 3000)
                        }, 200)
                    } else {
                        alert('删除失败');
                    }
                });
            } else {
                return false;
            }
        });

发布了32 篇原创文章 · 获赞 11 · 访问量 11万+

猜你喜欢

转载自blog.csdn.net/jinxi1112/article/details/53195330