1

機能を更新するためのプルを実行するノックアウト バインディング ハンドラーを作成しようとしています (iOS の多数のアプリに似ています)。そこで、タッチ ジェスチャには Hammer.js を使用し、問題のアイテムをアニメーション化するには jquery アニメーションを使用し、バインディング ハンドラーを作成しました。

ここに同じフィドルがあります。http://jsfiddle.net/sujesharukil/Jy8Yg/38/

ドラッグアンドリリースが速いと、すべてがうまく機能します。しかし、div をゆっくりと下にドラッグすると、上部の灰色の更新バーが下部の div に重なってしまいます。つまり、灰色の更新領域のアニメーションは、ドラッグされている下部の div よりも速く発生するようです。ここで些細なことを見逃しているに違いありません。別の目のセットは間違いなく役立ちます。何か問題がありましたか？誰かが私を助けることができますか？

 init: function(element, valueAccessor) {

    var $element = $(element), handler = valueAccessor(),
        $pullToRefresh = $('<div/>', {'class': 'pull-refresh-slide'}),
        $pullMessage = $('<div/>', {'class': 'pull-message'});

    $pullToRefresh.append($pullMessage);

    $element.before($pullToRefresh);

ドラッグダウン リリース ハンドル内のコードは次のとおりです。

var mTop = ev.gesture.deltaY,
    pTop = parseInt($pullToRefresh.css('top'));

    console.log('pTop: ' + pTop);
    console.log('mTop: ' + mTop);
    console.log('pTop + mTop : ' + (pTop + mTop));

    if(pTop + mTop > 0 ){
        pTop = 0;
        $pullMessage.addClass('release');
    }
    else
        pTop = pTop + mTop;


     if(mTop > parseInt($pullToRefresh.height()))
         mTop = parseInt($pullToRefresh.height());


     $element.animate({'margin-top': mTop },{duration: ev.gesture.deltaTime / 100, queue: false});
     $pullToRefresh.animate({'top': pTop},{duration: ev.gesture.deltaTime/100, queue: false});

最後の 2 つのアニメーション機能は、同時に発生していないようです。

4

1 に答える 1

0

$element のアニメーションに基づいて pullToRefresh の deltaTime を調整することで、基本的にこれを解決しました。そのため、$element にアニメーション完了へのコールバックを追加して、$pullToRefresh をアニメーション化しました。

于 2013-04-12T13:36:04.290 に答える