4

jQueryとtouchSwipeプラグインを使用してコンテンツを上下にスクロールしています。私はいくつかの数学関連の問題を抱えており、コミュニティが私がこれを理解するのをすぐに助けることができるかどうかを見たいと思っていました。

touchSwipeの「distance」変数はゼロから始まる正の値のみを返すため、距離の値がex：（0 initial、15up、32up、20up、 5up、10down、40down）。これらすべての状況をキャッチするために、4つのifステートメントを作成しました。「方向変更」ifステートメントをどのように処理しますか？

touchSwipe： http: //labs.skinkers.com/touchSwipe/

上下にスワイプする機能：

var _scrolling=false;
var _prev=0;
$("#list").swipe({
  swipeStatus:function(event, phase, direction, distance, fingerCount) {
    if(phase=="end"){return false;}
    if(phase=="move" && !_scrolling) {
      var t = parseInt($("#list").css("top").split('px')[0]);
      var s = 0;
      if(direction=="up" && (distance-_prev) > 0){
         //still moving up
         s = t-(distance-_prev);
         _prev=distance;
       } else if(direction=="up" && (distance-_prev) < 0){
          //direction change - moving down    
       } else if(direction=="down" && (distance-_prev) > 0){
         //still moving down
          s = t+(distance-_prev);
         _prev=distance;
       } else if(direction=="down" && (distance-_prev) < 0){
          //direction change - moving up
       }
       _scrolling=true;
       $("#list").animate({ top:s }, 70, function() {_scrolling=false;});   
   }<!--if end-->
  }<!--swipeStatus end-->
});
4

2 に答える 2

1

そのため、数日後、この問題を解決し、元の「swipeStatus」関数を修正し、touchSwipejQueryプラグインを使用して絶対領域をスクロールする非常に効率的な完全機能関数を作成することができました。

解決：

function swipeScroll(c,b,pd,f){
    $(c).swipe({//c style must be position:absolute;top:0; b style must be position:relative;
      swipeStatus:function(event, phase, direction, distance, fingerCount) {
        if(phase=="start"){pd=0;}
        if(phase=="end"){return false;}
        if(phase=="move" && pd!=distance){
          var t = parseInt($(c).css("top"),10);
          var u = (pd-distance);
          if(direction=="up" && t != u){ t+=u; }else if(direction=="down" && t != -u){ t-=u; }
          pd=distance;
          if(t > 0 || $(b).height() > $(c).height()){t=0;}//top of content
          else if(($(b).height()-t) >= $(c).height()){//bottom of content
            t=$(b).height()-$(c).height();
            if(typeof f != "undefined"){f();}
          }
          $(c).css("top",t);
        }
      }
    });
}

関数パラメーターの説明：

c：スクロールする絶対コンテンツb：コンテンツ「c」を囲む相対コンテナpd：前のスクロールから移動した距離を格納する変数f：スクロールが一番下に達したときに呼び出す関数

注：「b」は相対位置を持ち、「c」はtop：0の絶対位置を持っている必要があります

使用例：

var distance;
swipeScroll("#list","#body",distance, function() { alert("bottom"); });

リサーチ：

「$（c）.css（ "top"、t）;」を使用する代わりに また、jQuery animate（）関数を使用してこれをテストし、スムーズなスライド効果を実現しましたが、実際にはスクロールが遅くなりました。スワイプが速すぎると「t」が「0」をスキップし、方向が「上」から「下」に変わり、スクロールされているコンテンツが突然ジャンプするため、アニメーションは予期しない結果をもたらしました。

于 2012-08-29T22:06:11.440 に答える
0

注：行を使用する

if (phase == "end") { return false; }

タッピングイベントの使用を防ぎます。したがって、そのイベントが必要な場合は、この行を削除する必要があります。

于 2013-12-30T16:25:31.723 に答える