如何模拟点击时的滑动？

Question

我目前正在尝试开发一个带有一些刷卡操作的应用程序（类似于 Tinder 的工作方式）。

我找到了一个在我当前的代码中运行良好的样板文件： https://www.cssscript.com/card-carousel-tinder/

问题是：在旧移动设备上滑动操作可能相当缓慢（可能是由于 hammer.js 的连续触摸检测）

所以，我想添加一个功能，只需点击卡片即可更换卡片。样板有一个很棒的点击检测功能，但我无法模拟点击的滑动。

我试过从函数中输入自定义手指坐标，但它对卡没有任何影响（未检测到假触摸）

https://www.cssscript.com/card-carousel-tinder/

Answer 1

这不会为卡片设置动画，但会添加“喜欢”和“不喜欢”按钮。当用户做出选择时，卡片会消失并显示下一个。

在push()的底部，添加（这里使用jQuery）：

            $('<div class="swipe-right-button">Like</div>' +
              '<div class="swipe-left-button">Dislike</div>').appendTo(card)

在 onTap(e) 的顶部，添加：

            let clickedElementClass = e.target.className;
            if(clickedElementClass.includes('button')) {
                if(clickedElementClass.includes('swipe-right')){
                    alert('clicked swiped right button')
                    // do something
                }
                if(clickedElementClass.includes('swipe-left')){
                    alert('clicked swiped left button')
                    // do something
                }
                this.board.removeChild(this.topCard)
                this.push()
                this.handle()
            }

您可以随心所欲地设置按钮样式。这是一个例子：

            .swipe-right-button{
                background-color: #d7e2b7;
                width:50%;
                float: left;
                text-align: center;
                padding: 10px 0 10px;
            }
            .swipe-left-button{
                background-color: #eab4b4;
                width:50%;
                float: left;
                text-align: center;
                padding: 10px 0 10px;
            }

如何模拟点击时的滑动？

How to simulate a swipe on click?

javascript

css

jquery

hammer.js