jQuery TouchSwipe水平滚动将持续启动

Question

我正在使用jQuery TouchSwipe在一个移动网站上制作一些水平的、可滚动的div。我已经将其设置为div向左或向右滚动，这取决于您的滑动方式。我的问题出在你停止刷卡并重新刷卡之后。当您转到swipe时，div将返回到开头。显然，我希望div停留在它所在的位置，并从该位置滚动。这是我到目前为止所拥有的。

$('#table_set').swipe({
  swipeStatus:swipe1, allowPageScroll:'horizontal'
});
function swipe1(event, phase, direction, distance, duration){
  if(direction == 'left'{
    $(this).scrollLeft(distance);
  }else{
    $(this).scrollLeft('-' + distance);
  }
}

我理解为什么它会转到div的开头。每次你触摸时，duration等于0。我只是不知道下一步是什么。任何帮助都是令人惊叹的。谢谢!

Answer 1

我已经创建了一个刷卡的演示。我认为转到div开头的问题是因为如果只有一次单击而没有滑动，则direction会返回null。

如果direction为null，我通过退出回调来避免这种情况。

我不知道为什么你需要滑动，因为滚动在没有touchSwipe的情况下工作。

请在下面的jsFiddle上找到演示。

​

var IMAGECOUNT = 10;
var url = 'http://lorempixel.com/400/200';
var imgArr = [];
var loadCounter = 10;

var decCounter = function(){
    loadCounter--;
    if (!loadCounter) $("#table_set").trigger('allImgLoaded');
};

$(function() {
    var $table = $('#table_set');
    var img;
    //init table set with dummy images
    for(var i=0; i< IMAGECOUNT; i++){
        imgArr[i] = new Image();
        imgArr[i].src = url + '?' + (new Date()).getTime(); // add time to avoid caching
        imgArr[i].onload = decCounter;
    }
    
    $("#table_set").on('allImgLoaded', function() {
        //console.log(imgArr);
        $table.append(imgArr);
    });
});


$('#table_set').swipe({
  swipeStatus:swipe1, allowPageScroll:'horizontal'
});
function swipe1(event, phase, direction, distance, duration){
    console.log('swiped!', direction, distance, duration);
    if ( direction === null ) return; // no swipe
    
    var curPos = $(this).scrollLeft();
    var newPos = curPos;
  if(direction == 'left'){
      newPos += distance;
    $(this).scrollLeft(newPos);
  }else{
      newPos -= distance;
    $(this).scrollLeft(newPos);
  }
}

#table_set  {
    height: 210px;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table_set">
    
</div>

​