如何使用Hammer.js刷卡？

Question

所以我 hammer.js 滑动即可在我的 div 上工作。滑动区域看起来像这样

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

脚本等：

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;
}

就像我说的，滑动类型有效，但图像消失了。为什么会发生这种情况，我该如何解决？此外，滑动在某种程度上不是很 "reactive"，比如它很慢。不自然。有其他选择吗？或更好的实施方式？另外，刚刚意识到，图像也可以滑动？？我如何 "lock" 图片。我只想刷一下图片的容器。

Answer 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>

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

如何使用Hammer.js刷卡？

How to use Hammer.js for swiping?

javascript

html

hammer.js

swipe-gesture