边缘滑动导航

Question

你能推荐一款JS库，当使用基本的HTML＆CSS时，实际上提供边缘滑动功能吗？

我已经搜索了很多，但没有找到解决这个问题的真正来源。我看过很多库可以启用滑动手势，但没有边缘滑动。

我的最后一次尝试是使用Hammer.js，我已经尝试实现如下：

var swipe = new Hammer(document);
// detect swipe and call to a function
swipe.on('swiperight swipeleft', function (e) {
    e.preventDefault();
    var endPoint = e.pointers[0].pageX;
    var distance = e.distance;
    var origin = endPoint - distance;

    //swipe right to open nav
    if (origin <= 15 && e.type == 'swiperight') {
        // open main menu
        $('#navigation-menu').animate({
            left: '0'
        });
    } else {
        // close/hide menu(s)
        $('#navigation-menu').animate({
            left: '-100%'
        });
    }
});

而且，如果不使用任何库，我该如何使用原生JS实现移动端边缘滑动来显示和隐藏内容（在我的情况下是导航菜单）？

目前，我对任何解决方案/方向都持开放态度。

- Null isTrue

---

一个非常简单和愚蠢的方法是在页面顶部创建一个虚拟层。假设您的宽度为400px，在左右分别创建75px的虚拟层，并将hammer.js附加到该元素上。这样就可以实现边缘向右滑动。这不是一个非常好的解决方案，但可以帮助您实现所需的功能。让我看看hammerjs。 - karthick

库请求属于禁止主题。 - jhpratt

此外，我正在请求/寻求解决方案。 - Null isTrue

在这种情况下，你的问题应该反映出来，并且指出你已经尝试过什么。 - jhpratt

@jhpratt，这已经变成了另一个问题。而且我提出的问题是寻求可以使用或不使用hammer.js解决的解决方案，这也是我第一个问题的主题。因此，这些问题本质上并不相同。一个简单的指引会对我有所帮助。但你也说库不在讨论范围之内。那么这里的协议是什么？ - Null isTrue

Answer 1

这里有一个解决方案，你可以设置 thresholdStart、End 和 Milliseconds。你可能需要整理代码，并将其移植到触摸事件（我在浏览器中使用鼠标事件进行测试）。

使用： swipeEdgeFromLeft 函数和 swipeEdgeFromRight 函数。

var div = document.body;
var mouse = {
  isDown: false,
  inLeft: false,
  inRight: false,
  downTimestamp: null
};
var width, thresholdStart, thresholdEnd, thresholdMilliseconds;

function resize(){
  width = window.innerWidth;
  thresholdStart = 0.1*width;//within 10% of screen width
  thresholdEnd = 0.13*width;//beyond 13% of screen width
  thresholdMilliseconds = 500;//must be done in 500 milliseconds
}
document.addEventListener("resize", resize, false);
resize();//initialize

div.addEventListener('mousedown'/*'touchstart'*/, function(e){
 var x = e./*touches[0].*/pageX;
 mouse.isDown = true;
 mouse.downTimestamp = performance.now();

 if(x < thresholdStart){
  mouse.inLeft = true;
 } else if(x > width-thresholdStart){
  mouse.inRight = true;
 }
});
div.addEventListener('mousemove'/*'touchmove'*/, function(e){
 
  var x = e./*touches[0].*/pageX;
  if(mouse.inLeft && x > thresholdEnd){
    mouse.inLeft = false;
    if(performance.now() - mouse.downTimestamp < thresholdMilliseconds){
      swipeEdgeFromLeft();
    }
  } else if(mouse.inRight && x < width-thresholdEnd){
    mouse.inRight = false;
    if(performance.now() - mouse.downTimestamp < thresholdMilliseconds){
      swipeEdgeFromRight();
    }
  }
});
div.addEventListener('mouseup'/*'touchend'*/, function(e){
 //var x = e./*changedTouches[0].*/pageX;
 mouse.isDown = false;
 mouse.inLeft = false;
 mouse.inRight = false;
 mouse.downTimestamp = null;
});
function swipeEdgeFromLeft(){
 console.log("edge swipe from left");
}
function swipeEdgeFromRight(){
 console.log("edge swipe from right");
}

body {
  max-width: 100vw;
  height: 100vh;
}
.bar {
  height: 100vh;
  background-color: rgba(0,0,0,0.4);
  position: fixed;
  pointer-events: none;
}
#left-inner-threshold {
  width: calc(0.1 * 100vw);
  left: 0;
}
#right-inner-threshold {
  width: calc(0.1 * 100vw);
  right: 0;
}
#left-outer-threshold {
  width: calc(0.13 * 100vw);
  left: 0;
}
#right-outer-threshold {
  width: calc(0.13 * 100vw);
  right: 0;
}

<div id="left-inner-threshold" class="bar"></div>
<div id="left-outer-threshold" class="bar"></div>
<div id="right-inner-threshold" class="bar"></div>
<div id="right-outer-threshold" class="bar"></div>

- George

---

谢谢你，George！我会仔细阅读并尝试将其翻译到我的用例中。 - Null isTrue

你写的那个 resize 实现会跟着这个一样吗？ - Null isTrue

是的，我刚刚实现了resize。thresholdStart是屏幕左侧或右侧开始滑动操作的像素数，例如0.25*width将是宽度的25%。thresholdEnd类似，但是是触发滑动函数的点，如果在thresholdStart内开始移动并移动超出thresholdEnd。 - George

非常感谢，那很有道理。抱歉，我在你之前编辑了我的评论... - Null isTrue

Answer 2

这里是使用Hammer.js v2.0.8的解决方案，来优化你现有的代码。

如何实现边缘滑动的说明可以在这里找到，由@jovinbm回答。请参考此处。

$(document).ready(function () {

    const swipe = new Hammer(document);
    function getStartPosition(e) {
        const delta_x = e.deltaX;
        const delta_y = e.deltaY;
        const final_x = e.srcEvent.pageX || e.srcEvent.screenX || 0;
        const final_y = e.srcEvent.pageY || e.srcEvent.screenY || 0;

        return {
            x: final_x - delta_x,
            y: final_y - delta_y
        }
    };

    swipe.on('swiperight swipeleft', function (e) {
        e.preventDefault();
        const { x } = getStartPosition(e);
        console.log(x);
        //swipe right to open nav /* note the condition here */
        if (e.type == 'swiperight' && x >= 0 && x <= 50) {
            // open menu
            $('#navigation').animate({
                left: '0'
            });
            //swiping left should slide out nav and/or sub-nav
        } else {
            // close/hide menu
            $('#navigation, #task-menu').animate({
                left: '-100%'
            });
        }
    });
});

这里有一个示例展示了它的使用：

- Jonca33

---

非常感谢这个解决方案！我选择了George Campbell的答案，但你们两个都帮我走出了这个困境。 - Null isTrue

const final_x = e.center.x || e.srcEvent.pageX || e.srcEvent.screenX || 0; 常量 final_x 等于 e.center.x 或 e.srcEvent.pageX 或 e.srcEvent.screenX 或 0； - Amit Saharan

Answer 3

对于滑动操作，只有最后一个 pointerup 事件会被包含在传递到处理程序的事件对象中作为 srcEvent（请参见 http://hammerjs.github.io/api/）。携带了滑动事件开始时初始位置细节的初始 pointerdown 事件不会在 Hammer 事件对象中提供。幸运的是，您可以使用事件对象中的 srcEvent 来获取事件初始 pointerdown 事件的起始位置。

const getStartPosition = (e) => {
  const delta_x = e.deltaX;
  const delta_y = e.deltaY;
  const final_x = e.srcEvent.pageX || e.srcEvent.screenX || 0;
  const final_y = e.srcEvent.pageY || e.srcEvent.screenY || 0;

  return {
    x: final_x - delta_x,
    y: final_y - delta_y
  };
};

const handleSwipe = (e) => {
  const {x} = getStartPosition(e);

  if (x >= 0 && x <= 50) {
    // handle swipe from left edge e.t.c
  }
  else {
    // handle other case
  }
};

“srcEvent”是一个普通的JavaScript事件，继承了UIEvent的属性，因此上面的pageX/pageY API。这在其他浏览器中可能不起作用，因为其中一些浏览器未标准化。

- Jovin Mwilanga