hammer.js 向右滑动下一页答案

【问题标题】：hammer.js swipe right next pagehammer.js 向右滑动下一页
【发布时间】：2020-02-16 03:34:39
【问题描述】：

想右滑翻下一页，右滑翻上一页，找了好久，好像没用

hammer.js 似乎是最有前途的

hammertime.get('swipe').set({ direction: Hammer. });

以下建议的脚本似乎不起作用，还有其他建议吗？

【问题讨论】：

67% 的互联网使用来自移动设备，我找不到简单的方法来滑动到下一页，这应该是标准功能，但没有这样的例子实际工作

标签： javascript hammer.js

【解决方案1】：

const hammerTime = new Hammer(someElement)
hammerTime.on('swipeleft swiperight', (event) => {
  switch(event.type) {
    case 'swipeleft': 
      window.location.href = "https://someurl.com"
      break
    case 'swiperight':
      window.location.href = "https://someotherurl.com"
      break
  }
})

或

hammerTime.on('swipeleft', (event) => {
  window.location.href = "https://someurl.com"
})
hammerTime.on('swiperight', (event) => {
  window.location.href = "https://someotherurl.com"
})

【讨论】：

Hmmm...open 必须是一个预定义的函数。如果没有这种情况，您可以使用window.location.href（已编辑示例以反映这一点）。
glitch.com/edit/#!/hammer-swipe-newurl我在故障上制作了网站
任何帮助将不胜感激
@RyanHerter 对我来说很好。 jsfiddle.net/0p5tgcsn

【解决方案2】：

我可能找到了一种适用于我的情况的解决方案。

window.addEventListener('load', function() {
    var el = document.getElementsByTagName('body')[0];
    var hammertime = Hammer(el);
    hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
    /* the magic... */
    hammertime.on('swipe', function(ev) {
        var direction = '';
	    switch(ev.direction) {
	        case Hammer.DIRECTION_LEFT:
	        var right = document.querySelector('.right');
	        var href_right = right.getAttribute('href');
	        document.location.href=href_right;
	        break;
	        case Hammer.DIRECTION_RIGHT:
	        var left = document.querySelector('.left');
	        var href_left = left.getAttribute('href');
	        document.location.href=href_left;
	        break;
	        }

    });
}, false);

这个由 Hammer 授权的 js 脚本正在获取滑动手势的方向，然后检索对应于获取其属性 href 的元素的类并将用户重定向到它。

<div class="thumb-first">
<!-- Swipe -->
<div class="swipe">
	<a class="left" href="https://www.youtube.com/"><span></span></a>
	<a class="active" href="#"><span></span></a>
	<a class="right" href="https://stackoverflow.com/"><span></span></a>
</div>

希望对你有帮助！

【讨论】：