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

最后两个动画功能似乎没有同时发生。

4

1 回答 1

0

我基本上通过根据 $element 的动画调整 pullToRefresh 的 deltaTime 来解决这个问题。因此在 $element 上添加了对动画完成的回调以动画 $pullToRefresh。

于 2013-04-12T13:36:04.290 回答