使用滑动手势从一页移动到另一页

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。根据您的应用进行更改。

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

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

});

欢呼！