Question

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

这是我在hammerjs中编写的代码，然后称为＆＃34; swipeleft＆＃34;函数在一个html元素上。它运行正常，但在每次滑动时我都应该转到下一页，现在只进入一页。

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应用程序，我做了同样的事情。

首先在head部分添加hammer和jquery文件。
制作一个锤子对象

＆＃13;

    var mc = new Hammer(main);

＆＃13;

这里＆＃34;主要＆＃34;是您想要检测手势的DIV。根据您的应用更改它。

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

＆＃13;

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

＆＃13;

类似地，你可以编码向右滑动：

＆＃13;

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

＆＃13;

现在要在下一个/上一个帖子之间切换，你可以做一些接近这个的事情。你必须根据你的应用定制这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Cheerio！

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

1 个答案: