javascript - 在Javascript中滑动以删除iOS的按钮？

Question

我只是在我的 iPod 上的 Safari 上的 Facebook 上，每当你在 Messenger 中并且你在任何消息上向右/向左滑动时，都会出现一个删除按钮。

有人可以指导我并可能告诉我它是如何在 html/JS/jQuery 中完成的吗？

非常感谢！

Answer 1

我不知道 jQuery mobile，这将是一种更简单的方法，但这里是你如何在普通的 ol JS 中做到这一点：

document.body.addEventListener('touchstart',function(e)
{
    e = e || window.event;//don't know how mobile browsers behave here
    var startCoordinates = {x:e.changedTouches[0].clientX,
                            y:e.changedTouches[0].clientY};
    var endHandler = function(e)
    {
        e = e || window.e;
        var xDiff = Math.abs(Math.abs(startCoordinates.x) - 
                             Math.abs(e.changedTouches[0].clientX));
        //unbind handler, avoid double listeners
        document.body.removeEventListener('touchend', endHandler, false);
        if (xDiff >= 50)
        {//assume small movement wasn't intended as swipe
            //here a swipe was detected
            if (confirm('Are you sure you want to delete X?'))
            {//perform xhr request here, or whatever
            }
        }
    };
    document.body.addEventListener('touchend',endHandler,false);
},false);

jQmobile 可能会容易得多，但这是我认为的基本思想，它适用于我为（Android、iOS（4 到 6）编写脚本的所有移动浏览器，甚至支持触摸事件的开发模式下的 chrome 也适用像这样的代码）。

更新：
添加了专门处理滑动的代码：

(function(G,und)
{
    'use strict';
    var load = function()
    {
        var tStart, body = document.body;
        tStart = function(e)
        {
            e = e || G.event;
            var coords = e.changedTouches[0].clientX,
            tEnd = function(e)
            {
                e = e || G.event;
                var currentX = e.changedTouches[0].clientX;
                if (body.removeEventListener)
                {
                    body.removeEventListener('touchend',tEnd,false);
                }
                else
                {//shouldn't be possible, but I don't know all browsers, of course
                    body.detachEvent('ontouchend',tEnd);
                }
                if ((coords - currentX) <= 50)
                {//too little movement
                    /*console.log*/alert('moved, but no real swipe');
                }
                else
                {
                    /*console.log*/alert('SWIIIPEEE!');
                }
            };
            if (body.addEventListener)
            {
                return body.addEventListener('touchend',tEnd,false);
            }
            body.attachEvent('ontouchend',tEnd);
        };
        if (G.removeEventListener)
        {
            body.addEventListener('touchstart',tStart,false);
            return G.removeEventListener('load',load,false);
        }
        body.attachEvent('ontouchstart',tStart);
        return G.detachEvent('onload',load);
    };
    if (G.addEventListener)
    {
        return G.addEventListener('load',load,false);
    }
    return G.attachEvent('onload',load);
}(this));

Answer 2

我创建了一个 Javascript 库来执行此操作 - 今天刚刚发布！https://github.com/ankane/swipeout

Answer 3

这将允许用户滑动和点击；

这与bootstrap一起用于绑定样式和剔除（但这是可选的，在此演示中未使用）。

在iOS和Android（Cordova 应用程序）上工作和测试。由于我的数组包含重要信息，我决定滑动以显示删除按钮，然后允许用户单击此按钮。这将作为用户决定删除它。

此外，我使用此代码不仅用于删除只是适当地设置插件按钮的样式（'btn-success' 等）。

所需的 jquery 库的扩展是“ jquery.event.move ”（https://github.com/stephband/jquery.event.move）

HTML：

<div class="col-xs-12 btn-group-vertical">
    <!-- ko foreach: Alert -->
      <a class="btn btn-lg btn-default mySwipe" role="button" style="height:45px;float:left;">This is also test</a>
      <button class="btn btn-lg btn-danger btn-addOn" style="width:0px;display:none;right:0px;height:45px;margin-top:0px;padding:10px;">Delete Alert</button>
    <!-- /ko -->
</div>

JS：

每次数组更改时都会调用它 (swipeButton('.mySwipe');)

// THIS FUNCTION APPLIES THE SWIPE DELETE LOGIC TO LIST ITEMS (.btn)
function swipeButton(elementIdentifier) {
    $(elementIdentifier).on('movestart', function (e) {
        // If the movestart is heading off in an upwards or downwards 
        // direction, prevent it so that the browser scrolls normally.
        if ((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) {
            e.preventDefault();
        }
        else {
            if (e.distX < 0) {
                // Left
                $(e.currentTarget).css('border-bottom-right-radius', '0px');
                $(e.currentTarget).css('border-top-right-radius', '0px');
            }
        }
    }).on('move', function (e) {
        var item = $(e.currentTarget);
        var total = item.parent().width();
        var btn = $(e.currentTarget.nextElementSibling);

        if (e.distX < 0) {
            // Left
            var distance = e.distX * -1;
            distance = distance > 120 ? 120 : distance;
            btn.show();
            // Move
            var itemWidth = total - distance;
            var btnWidth = distance < 35 ? 0 : distance;
            if (btnWidth == 0) {
                btn.hide();
                itemWidth = total;
            }
            item.css('width', itemWidth + 'px');
            btn.css('width', btnWidth + 'px');
        }
        else {
            //Right
            var distance = e.distX;
            distance = distance > 120 ? 120 : distance;
            var currentWidth = item.width();
            // Move
            var thisMove = e.deltaX == 0 ? distance : e.deltaX;
            var itemWidth = currentWidth + thisMove;
            itemWidth = itemWidth > total ? total : itemWidth;
            var btnWidth = total - itemWidth;
            btnWidth = btnWidth < 14 ? 0 : btnWidth;
            if (btnWidth == 0) {
                btn.hide();
                itemWidth = total;
            }
            item.css('width', itemWidth + 'px');
            btn.css('width', btnWidth + 'px');
        }
    }).on('moveend', function (e) {
        var total = $(e.currentTarget).parent().width();
        var itemWidth = $(e.currentTarget).width();
        if (itemWidth == total) {
            // End Right
            $(e.currentTarget).css('border-bottom-right-radius', '');
            $(e.currentTarget).css('border-top-right-radius', '');
            var btn = $(e.currentTarget.nextElementSibling);
            btn.hide();
        }
    });
}

此代码的工作演示：http: //jsfiddle.net/3d9n9cdo/5/