TouchSwipe距离复位

Question

我试图创建一个非常简单的刷卡画廊。但我遇到了一个问题。首先，下面是我的代码：- https://jsfiddle.net/drbj6zk8/2/

function swipe2(event, phase, direction, distance) {
        var check = $(this).children('.swipe-slide');
        if (!flag) {
            distance = dist;
            flag = 1;
            console.log(dist+' distance start');
        }
        console.log(phase);
        var distance2;
        console.log (dist + ' dist');
        console.log (distance+ ' distance');
        if(phase == 'end' && distance) {
            dist += distance;
            flag = 0;
            console.log(dist+' distance end');
        }
        if (direction == "left") {
            distance2 = "translateX(-"+distance+"px)";
        } else if (direction == "right") {
            distance2 = "translateX("+distance+"px)";
        }

        check.css('transform', distance2);
    }

现在，“画廊”在左、右两个方向都可以很好地滑动。但是，当我释放鼠标按钮并试图再次从=>的位置滑动目标变量重置为0时，问题就出现了，它会让我回到滑动器的初始位置。谢谢。

有什么办法解决这个问题吗?我错过了什么？

我正在使用JQuery和TouchSwipe插件：scrolling.html

编辑:更改到jsfiddle的链接

Answer 1

您的代码需要进行一些结构更改：

• 每次触发“滑动结束”事件时，翻译都返回到0(这就是为什么您看到图库重置)。
• 翻译需要是上一次翻译和当前翻译的区别。
• 此差异需要根据滑动方向从当前翻译中添加或减去。

请核对一下这个例子

​

$(function() {

  var currentTranslation = 0;
  var lastDistance = 0;
  var translationDelta = 0;

  $("#test5").swipe({
    swipeStatus: swipe2,
    allowPageScroll: "horizontal"
  });
  //Swipe handlers

  function swipe2(event, phase, direction, distance) {
    var check = $(this).children('.swipe-slide');
    if (phase == "end") {
      translationDelta = 0;
    } else {
      translationDelta = lastDistance - distance;
    }

    if (direction == "right") {
      currentTranslation -= translationDelta;
    } else if (direction == "left") {
      currentTranslation += translationDelta;
    }

    var distance2 = "translateX(" + currentTranslation + "px)";

    check.css('transform', distance2);
    lastDistance = distance;
  }
});

.swipe {
  width: 100%;
  min-height: 100px;
  overflow-x: hidden;
  background-color: #444;
  @media (min-width: $screen-sm-min) {
    overflow: auto;
    &: : -webkit-scrollbar {
      display: none;
    }
  }
}
.swipe-wrapper {
  width: 20000px;
  @media (min-width: $screen-lg-min) {
    // width: 100%;

  }
}
.swipe-slide {
  // width: 25%;
  float: left;
  padding: 5px 5px;
  &: : after {
    display: table;
    content: '';
    clear: both;
  }
  img {
    max-height: 150px;
    // max-width: 150px;

  }
  h6 {
    margin: 5px 0;
    text-align: center;
    color: #ddd;
  }
}

<div class="swipe">
  <div class="swipe-wrapper" id="test5">
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.js"></script>

​

Answer 2

它的接缝，您总是将其称为"swipe2“，其距离= 0。因此，每次你开始滑动，它可以追溯到可滑动部分的开头。

我不完全确定您是否可以用代码中的不同变量调用函数，所以我会在代码中放置一个隐藏字段value=0，在swipe函数的末尾用最终的距离值来更新它，在swipe函数的开头设置距离=隐藏的字段值。如果这是第一次滑动，那么距离是零，如果它是一个连续的滑动，那么距离就是你在滑动器的任何位置。

Hm，设置swipe = hf.value并不完全有效，但是主要的问题是，距离=0在每次滑动的开始。

除非更聪明的人键入更好的解决方案..。