Question

我希望在移动网络应用程序（Android和iOS）上使用滑动事件，但我还需要浏览器本机缩放以缩放功能以保持原位。

我尝试过使用各种触摸事件库，例如Hammer.js，但是当处理滑动时，所有人似乎都放弃了移动Safari的缩放功能。保持垂直滚动也完好无损。

基本上，我正在寻找一种识别左/右方向滑动的方法，仅此而已。有什么想法吗？

Answer 1

我在最近的一个项目中使用了类似的功能。要使捏缩放功能起作用，您只需确保在视口标记中正确指定值，例如。

<meta name=viewport content="width=device-width,user-scalable=yes,initial-scale=1.0, maximum-scale=2.0"/>

最重要的值是user-scalable = yes以及最大比例，因为它必须大于1.0才能进行缩放。

您可以在此处找到有关视口的更多信息：https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

对于滑动事件，您可以将swipeleft和swiperight事件绑定到jQuery Mobile中的.on（）函数。

以下是您的代码应该是什么样子的示例：

$('#yourElement').on('swipeleft swiperight', function (event) {
    //swiped to the left
    if (event.type == "swipeleft") {
        //do something
    }
    //swiped to the right
    if (event.type == "swiperight") {
       //do something
    }
});

有关jQuery Mobile事件的更多信息，您可以查看此链接（或上面提供的链接m_gol，因为它们基本相同）：

http://jquerymobile.com/demos/1.1.1/docs/api/events.html

使用上面的两组代码，您将能够检测滑动事件以及缩放以缩放页面。

Javascript滑动事件，同时保持浏览器捏合功能

1 个答案: