Question

我正在使用Zepto.js进行移动Web应用。 Zepto提供了方便的方法，如swipe，swipeLeft和swipeRight。

例如：向左滑动完成后，会触发swipeLeft手势。至少这就是我的看法。

是否可以使用此滑动手势更新具有实时值的元素的位置。

因此，当我在文档上慢慢向左滑动时，我希望div.layer与我一起缓慢移动。当达到临界点时，layer应该捕捉到预定位置。

这有可能以某种方式。如果用Zepto不可能，我会选择一个不同的框架。

我现在拥有的

HTML 的

<div class="page-wrap">

    <section class="layer" id="one">

    </section>

    <section class="layer" id="two">

    </section>

</div>

CSS

.page-wrap {
    position:relative;
    width:100%;
    height:100%;
}

.page-wrap .layer {
    width:100%;
    height:100%;    
    position:absolute;
    top:0;
}   

.page-wrap #one {
    background:red;
}

.page-wrap #two {
    left:-100%;
    background:green;
}

JS

$(document).ready(function() {  
    $('#two').swipeRight(function(e) {
        showInfos(true);
    });

    $('#one').swipeLeft(function(e) {
        showInfos(false);
    });
});

function showInfos(show) {
    $("#two").animate({
        left: show?'0':'-100%'
    }, 200, 'ease-out');
}

这个有效！ .layer#two位于可见视口之外。在.layer#one向右滑动时，.layer#two从左侧滑入。在.layer#two向左滑动时，.layer#two会向左滑动。

这正是我希望我的应用程序执行的操作。该模式是众所周知的，很多应用程序都使用这种UI模式。

然而，我希望它做的就像在移动电话上的本机应用程序那样，当.layer向.layer滑动手指时swipe s更新它们相对于手指的位置用户。所以我不希望动画在position手势完成后生效。我希望.layer#two的{{1}}在刷卡时实时更新。

也许你想在某个地方进行测试。我在jsfiddle上提供了上面的代码段。

我真的很感激这方面的一些帮助。或提示和技巧。我想我可能不是唯一一个对此类事情感兴趣的人。

Answer 1

考虑使用您自己的触摸事件处理程序：http://www.html5rocks.com/en/mobile/touch/

从该页面拖动div的示例：

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
  // If there's exactly one finger inside this element
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    // Place element where the finger is
    obj.style.left = touch.pageX + 'px';
    obj.style.top = touch.pageY + 'px';
  }
}, false);

如果你更新它只是改变x坐标，你应该差不多完成了。

使用Javascript滑动手势：实时将滑动位置转换为元素的位置？

1 个答案: