Question

我正在尝试创建一个非常简单的swiper库。但我碰到了一个问题。首先，我的代码如下： - 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);
    }

现在，＆＃34;画廊＆＃34;向左和向右滑动两个方向完美。但是，当我释放鼠标按钮并尝试从我离开的地方再次滑动=＆gt;时出现问题。目标变量重置为0，它让我回到了swiper的初始位置。谢谢。

关于如何解决此问题以及我缺少什么的任何想法？

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

编辑：更改了指向jsfiddle的链接

Answer 1

它总是称为“swipe2”，距离= 0.因此，每次开始滑动时，它都会返回到可滑动部分的开头。

我不完全确定你是否可以在代码中调用带有不同变量的函数，所以我在代码中放置一个隐藏字段值= 0，在滑动函数结束时用最终距离更新它值和在滑动功能开始时设置距离=隐藏字段值。如果是第一次滑动，则距离为零，如果是连续滑动，那么距离就是你在闪光灯中的任何位置。

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

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

Answer 2

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

每次触发“滑动结束”事件时，翻译都会返回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距离重置

2 个答案: