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

Use swipe gesture to move from one page to another page

本文关键字：一页 移动      更新时间：2024-05-26

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

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

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

您可以使用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'));
			}
});
});

干杯！

相关文章：