Question

我正在使用jQuery TouchSwipe在移动网站上制作一些水平，可滚动的div。我已将其设置为div以向左或向右滚动，具体取决于您的滑动方式。在你停止滑动并再次滑动之后我的问题就在于此。当你去滑动时，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开头的问题是因为如果只有一次点击而没有滑动，方向会返回null。

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

我不确定为什么你需要刷卡，因为滚动无需使用touchSwipe。

请参阅下面的演示，并在此处jsFiddle。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery TouchSwipe水平滚动一直开始

1 个答案: