提问者:小点点

如何在列表元素上使用滑动事件添加选项和条件?


我有一个包含li元素的简单无序列表。我想做一些类似于rc-swipeout npm库的事情,如果你在列表元素上滑动,你会看到选项。

不幸的是,我正在运行Meteor/Blaze应用程序,无法使用React。我发现了几个简单的jQuery库,比如swipeTo,这里有一个演示(适用于移动)。

swipeTo库实际上提供了一些滑动功能,它提供了当你滑动过去时的选项。

但是,我想添加功能,当我刷所有方式,列表项删除。现在,当你一路滑动时,列表项就会反弹回它的正常位置,就像你在演示中看到的那样。

添加这样一个条件的最佳方法是什么?


共1个答案

匿名用户

尝试检查event.clientX;保存swipeStart中的值并将其与SwipeEnd中的值进行比较。(我不明白swipeto.js脚本是如何使事件坐标可用的,所以我对其进行了编辑,第40和93行):

if(typeof swipeStart == 'function') {
    swipeStart.call(this, start);   //add 'start' as parameter
}

if(typeof swipeEnd== 'function') {
    swipeEnd.call(this, absMoveStatus, e.changedTouches[0].clientX);   //add amount moved and clientX as parameter
}

在主脚本中:

$(function() {
    $('.item-swipe').swipeTo({
        minSwipe: 100,
        angle: 10,
        binder: true,
        swipeStart: function(start) { //now use start value
            console.log('start', start); 
        },
        swipeMove: function(e) {
            console.log('move');
        },
        swipeEnd: function(movedAmount, end) {
            console.log('end', movedAmount, end);
            // if movedAmount value > 200, and end value < 20 (close to left side), 
            // then delete the item
        },
    }); 
    deleteItem();
})