在移动主屏幕等网页上滑动 div

Question

我正在构建一个移动微型网站，其功能类似于应用程序（带有触摸交互）。

我有一个下拉菜单，其中包含几乎全屏的 div，我希望用户能够在它们之间滑动，如下所示：

---

---

我已经包含了 jQuery Mobile 库来获取滑动事件，它正在工作，但 div 滑动不顺畅，有时会完全消失，迫使我刷新页面。

在上图示例中，滑动时，div #1 将完全向左滑动（隐藏），然后 div #2 将向同一方向滑动（显示），仅在div #1 完全隐藏。我需要两个事件同时发生，所以 div #1 和 #2 之间没有间隙。

至于消失的问题，我不知道是什么原因造成的，抱歉。这是一些相关的代码...

javascript:

$('#menu').on('swipeleft', 'div', function(event) {
    $('#' + nextPage($(this).attr('id'),'l')).show('slide', { direction: 'right' }, 500);
    $(this).hide('slide', { direction: 'left' }, 500);
});
$('#menu').on('swiperight', 'div', function(event) {
    $(this).hide('slide', { direction: 'right' }, 500);
    $('#' + nextPage($(this).attr('id'),'r')).show('slide', { direction: 'left' }, 500);
});

如果有更好的方法可以做到这一点，我会全力以赴。

谢谢！

Answer 1

试试：

SwipeJS

或

查看this answer，它描述了如何在正常使用之外使用 jquery 移动转换。