javascript - 使用滑动手势从一个页面移动到另一页面

Question

我正在使用 AngularJS 和 Foundations 在 PhoneGap 中为 Windows Surface Pro 3 平板电脑构建一个应用程序。用户应该能够向侧面滑动以从一个页面移动到另一页面。我不知道如何解决这个问题，我尝试使用各种库，如hammer.js、swipe.js，但似乎不起作用。有人可以帮忙吗？

这是我在hammerjs中编写的代码，然后在其中一个html元素上调用“swipeleft”函数。它工作正常，但每次滑动我都应该转到下一页，现在它只转到一页。

var myElement = document.getElementById('first');
var hammer    = new Hammer.Manager(myElement);
var swipe     = new Hammer.Swipe();
hammer.add(swipe);
hammer.on('swipeleft', function(){
window.location = '#/food-truck';
});

Answer 1

您可以使用hammer.js轻松实现这一点。我对为 WordPress 博客制作的混合 Android 应用程序做了同样的事情。

1. 首先在 head 部分添加 Hammer 和 jquery 文件。

2. 制作一个锤子对象

    var mc = new Hammer(main);

这里的“main”是您要检测手势的DIV。根据您的应用程序进行更改。

现在您必须为每个手势添加这些代码块，就像这样:

    mc.on("swipeleft", function(ev) {
        //trigger when user swipe left
    });

同样，您可以编写向右滑动的代码:

mc.on("swiperight", function(ev) {
   //trigger when user swipe right
});

现在，要在下一篇/上一篇文章之间切换，您可以执行与此类似的操作。您必须根据您的应用程序进行定制:

mc.on("swipeleft", function(ev) {
			var post_nav = jQuery('link[rel="next"]');
		
			if ( post_nav ) {
				jQuery(location).attr('href', post_nav.attr('href'));
			}
});

这对我有用。这就是我的整个代码:

$(document).ready(function(){

var mc = new Hammer(main);

mc.on("swipeleft", function(ev) {
			var post_nav = jQuery('link[rel="next"]');
		
			if ( post_nav ) {
				jQuery(location).attr('href', post_nav.attr('href'));
			}
});

mc.on("swiperight", function(ev) {
			var post_nav = jQuery('link[rel="prev"]');
		
			if ( post_nav ) {
				jQuery(location).attr('href', post_nav.attr('href'));
			}
});

});

欢呼!