Question

我正在尝试编写一个敲除绑定处理程序来执行pull to refresh功能（类似于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});

最后两个动画功能似乎并不是串联发生的。

Answer 1

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

hammerjs jquery拉下刷新淘汰赛绑定

1 个答案: