如何使用 Hammer.js 进行刷卡？答案

【问题标题】：How to use Hammer.js for swiping?如何使用 Hammer.js 进行刷卡？
【发布时间】：2019-08-01 05:23:41
【问题描述】：

所以我有hammer.js 滑动来处理我的div。滑动区域看起来像这样

所以基本上，我希望橙色区域能够向左/向右滑动，当它到达末端（两侧）时，它会停止滑动。

脚本等：

var containerDiv = document.getElementById('list-container');
var listDiv = document.getElementById('train-line-list');

// Create a manager to manager the element
var manager = new Hammer.Manager(listDiv);

// Create a recognizer
var Swipe = new Hammer.Swipe();

// Add the recognizer to the manager
manager.add(Swipe);

// Declare global variables to swiped correct distance
var deltaX = 0;
var deltaY = 0;

// Subscribe to a desired event
manager.on('swipe', function(e) {
    deltaX = deltaX + e.deltaX;
    var direction = e.offsetDirection;
    var translate3d = 'translate3d(' + deltaX + 'px, 0, 0)';

     if (direction === 4 || direction === 2) {
         e.target.innerText = deltaX;
         e.target.style.transform = translate3d;
     }
});

<div id="list-container">
    <div id="train-line-list">
    <img id="" src="">
        <img id="" src="">
</div>

#list-container{
z-index: 10;
position:fixed;
top:60%;
left:0;
width:100%;
height:40%;
}
#train-line-list{
width: 95%;
height: 95%;
top: 2%;
margin: 0 auto;
position: relative;
}

就像我说的那样，滑动类型的作品，但图像消失了。为什么会发生这种情况，我该如何解决？此外，在某种程度上，滑动并不是很“反应性”，就像它的缓慢一样。不自然。有其他选择吗？还是更好的实施方式？另外，刚刚意识到，图像也可以刷卡？？我如何“锁定”图像。我只想刷图像的容器。

【问题讨论】：

请发布您的css代码
如果我理解正确，橙色框必须在滑动时移动？
是的。好吧，我的意思是我想要的基本上是让该区域左右滑动（如滑动列表）。因为会有8个以上的图像。并且流畅（就像我们在手机屏幕上自然滑动一样），因为现在它不是那么流畅。
github.com/mystroken/drag 应该很容易做到这一点
噢，太好了！谢谢你的建议。虽然我不知道如何使它工作。我正在使用这个 html 测试 [链接]mystroken.github.io/drag/[link]。加上github中的javascript [link]ministryxr.com/8thWallTesting/testdrag.html[link]

标签： javascript html hammer.js swipe-gesture

【解决方案1】：

这是一个工作示例

<html>
  <head>
    <style>
      #box {
        background-color: red;
        height: 100px;
        width: 100px;
        margin-right: 10px;
      }

      #collection {
        display: flex;
        flex-direction: horizontal;
      }

      #container {
        display: flex;
        background-color: aqua;
        padding: 50px 0px 50px 0px;
        overflow: scroll;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
  </head>

  <body>
    <div id="container">
      <div id="collection">
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
      </div>
    </div>

    <script>
      var container = document.getElementById("container");
      var content = document.getElementById("collection");
      var hammer = new Hammer(container);

      var initialX = 0;
      var deltaX = 0;
      var offset = initialX + deltaX;

      hammer.on("panleft panright", function(ev) {
        deltaX = ev.deltaX;
        offset = initialX + deltaX;

        container.scroll(-offset, 0);
      });

      Hammer.on(container, "mouseup", function(e) {
        initialX = offset;
      });
    </script>
  </body>
</html>

你可以用你的图片替换方块。

【讨论】：