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

2023年6月11日 187次阅读

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

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

基本上,我正在寻找一种识别左/右方向滑动的方法,仅此而已.有任何想法吗？

最佳答案 我在最近的一个项目中使用了类似的功能.要使夹点缩放功能起作用,您只需确保在视口标记中正确指定值,例如.

<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

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

点赞