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

现在，"gallery" 在左右两个方向滑动得非常好。但是，当我释放鼠标按钮并尝试从我离开的地方再次滑动时，问题就来了 => 目标变量重置为 0，它让我回到滑动器的初始位置。谢谢你。

关于如何解决这个问题以及我遗漏了什么的任何想法？

我正在使用 JQuery 和 TouchSwipe 插件：http://labs.rampinteractive.co.uk/touchSwipe/docs/tutorial-Page_scrolling.html

编辑：将 link 更改为 jsfiddle

Answer 1

你总是用距离 = 0 调用 "swipe2"。所以每次你开始滑动它都会回到可滑动部分的开头。

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

嗯，设置 distance = hf.value 并不完全有效，但主要问题是每次滑动开始时 distance = 0。

除非更聪明的人会输入更好的解决方案...

Answer 2

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

每次触发 "swipe end" 事件时，翻译 return 到 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>

TouchSwipe距离重置

TouchSwipe distance reset

html

javascript

css

jquery

touchswipe