Phonegap-(Android / iphone)带有多个图像的图库有问题吗?

时间:2021-02-14 00:19:16

I have made an image gallery in HTML5, JavaScript and CSS by using jQuery mobile. IE Phonegap platform ok.
The images are coming dynamically and are loaded in it, like this:
http://torontographic.com/wordpress/mouseSwipe/mouseSwipe.html

我使用jQuery mobile在HTML5,JavaScript和CSS中创建了一个图库。 IE Phonegap平台好的。这些图像动态地加载并加载到其中,如下所示:http://torontographic.com/wordpress/mouseSwipe/mouseSwipe.html

Above mouseSwipe Slider:

鼠标滑动滑块上方:

TYPE: 'mouseSwipe'
HORIZ: true
plugin available at
torontographic.wordpress.com

The problem coming with it is that I cannot click on the image and go to next page, because two events are occurring together.

随之而来的问题是我无法点击图像并转到下一页,因为两个事件一起发生。

The second problem is that I cannot swipe the page up down, from the place where gallery is placed, except the other area where gallery is not present.

第二个问题是我无法从放置图库的地方向上滑动页面,除了没有图库的其他区域。

To make it more clear, I am making news application in which I have added 5 - 10 gallery like Pulse news application.

为了更清楚,我正在制作新闻应用程序,其中我添加了5-10个图库,如Pulse新闻应用程序。

3 个解决方案

#1


0  

I'm a little confused about some of the details of the issue, but I hate to see this question go completely unanswered in case someone else has this issue.

我对这个问题的一些细节感到有点困惑,但是我讨厌看到这个问题完全没有答案,以防其他人有这个问题。

This plugin (mouseSwipe) overrides the default dragging functionality for mobile devices. Whereas normally devices would scroll the page on the mouse starting event, this plugin overrides that behavior to detect click movement across an element. Since it interrupts that functionality, dragging the opposite direction (for scrolling) is also broken. If the plugin were still being maintained by the owner (it doesn't appear to be), it could be updated to fix this issue, or emit events that could be used to manually create the functionality you're wanting.

此插件(mouseSwipe)会覆盖移动设备的默认拖动功能。通常设备会在鼠标启动事件上滚动页面,而此插件会覆盖该行为以检测元素上的点击移动。由于它会中断该功能,因此拖动相反方向(滚动)也会被打破。如果插件仍然由所有者维护(它似乎不是),则可以更新该插件以解决此问题,或者发出可用于手动创建您想要的功能的事件。

I assume this is also what is giving you trouble for clicking to go to the specified page.

我认为这也是点击转到指定页面的麻烦。

If you want my honest opinion, I would choose a different library, perhaps one that focuses solely on the swipability of mobile devices, and then handle desktop functionality separately (though, if you're using PhoneGap, it's likely you aren't even publishing this to a web platform for desktops). If it's going to be on the web, you can use modernizr (or the like) to figure out if the device supports touch input, and then implement something like the following:

如果你想要我的诚实意见,我会选择一个不同的库,也许只关注移动设备的可浏览性,然后单独处理桌面功能(但是,如果你使用的是PhoneGap,很可能你甚至都没有发布这是桌面的网络平台)。如果它将在网络上,您可以使用modernizr(或类似)来确定设备是否支持触摸输入,然后实现如下所示的内容:

http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html

http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html

For devices that do not support touch, you could fall back to button/arrow-based navigation (after all, as a desktop user, I do not expect to be able to drag it back and forth with the mouse).

对于不支持触摸的设备,您可以回退到基于按钮/箭头的导航(毕竟,作为桌面用户,我不希望能够使用鼠标来回拖动它)。

#2


0  

In the file http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js onmousedown function has the code below. This will stop the event from the default behaviour and in cases stop captured/bubbled. You may want to look at these or the way event are being handled by the libraries.

在文件http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js onmousedown函数中有以下代码。这将使事件从默认行为中停止,并在停止捕获/冒泡的情况下。您可能希望查看这些或库处理事件的方式。

e.preventDefault()

Here is more on how to stop JQuery propagation and regular behaviour.

以下是关于如何停止JQuery传播和常规行为的更多信息。

event.preventDefault() vs. return false What is event bubbling and capturing?

event.preventDefault()与return false什么是事件冒泡和捕获?

#3


0  

The reason you cannot swipe up and down is likely due to that the "swipe" event is hogging the "movestart" or "move" event.

您无法向上和向下滑动的原因可能是由于“滑动”事件占用了“movestart”或“move”事件。

I ran into a similar problem once when using this plugin: http://stephband.info/jquery.event.swipe/

使用此插件时遇到类似的问题:http://stephband.info/jquery.event.swipe/

Their solution as pointed on on their website was to call the preventDefault method on the event to keep it from blocking as seen here.

他们在网站上指出的解决方案是在事件上调用preventDefault方法,以防止阻塞,如此处所示。

jQuery('.mydiv')
.on('movestart', function(e) {
  // If the movestart is heading off in an upwards or downwards
  // direction, prevent it so that the browser scrolls normally.
  if ((e.distX > e.distY && e.distX < -e.distY) ||
      (e.distX < e.distY && e.distX > -e.distY)) {
    e.preventDefault();
  }
});

I have no experience with jQuery mobile, but i would reckon the problems are similar.

我没有使用jQuery mobile的经验,但我认为问题是类似的。

#1


0  

I'm a little confused about some of the details of the issue, but I hate to see this question go completely unanswered in case someone else has this issue.

我对这个问题的一些细节感到有点困惑,但是我讨厌看到这个问题完全没有答案,以防其他人有这个问题。

This plugin (mouseSwipe) overrides the default dragging functionality for mobile devices. Whereas normally devices would scroll the page on the mouse starting event, this plugin overrides that behavior to detect click movement across an element. Since it interrupts that functionality, dragging the opposite direction (for scrolling) is also broken. If the plugin were still being maintained by the owner (it doesn't appear to be), it could be updated to fix this issue, or emit events that could be used to manually create the functionality you're wanting.

此插件(mouseSwipe)会覆盖移动设备的默认拖动功能。通常设备会在鼠标启动事件上滚动页面,而此插件会覆盖该行为以检测元素上的点击移动。由于它会中断该功能,因此拖动相反方向(滚动)也会被打破。如果插件仍然由所有者维护(它似乎不是),则可以更新该插件以解决此问题,或者发出可用于手动创建您想要的功能的事件。

I assume this is also what is giving you trouble for clicking to go to the specified page.

我认为这也是点击转到指定页面的麻烦。

If you want my honest opinion, I would choose a different library, perhaps one that focuses solely on the swipability of mobile devices, and then handle desktop functionality separately (though, if you're using PhoneGap, it's likely you aren't even publishing this to a web platform for desktops). If it's going to be on the web, you can use modernizr (or the like) to figure out if the device supports touch input, and then implement something like the following:

如果你想要我的诚实意见,我会选择一个不同的库,也许只关注移动设备的可浏览性,然后单独处理桌面功能(但是,如果你使用的是PhoneGap,很可能你甚至都没有发布这是桌面的网络平台)。如果它将在网络上,您可以使用modernizr(或类似)来确定设备是否支持触摸输入,然后实现如下所示的内容:

http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html

http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html

For devices that do not support touch, you could fall back to button/arrow-based navigation (after all, as a desktop user, I do not expect to be able to drag it back and forth with the mouse).

对于不支持触摸的设备,您可以回退到基于按钮/箭头的导航(毕竟,作为桌面用户,我不希望能够使用鼠标来回拖动它)。

#2


0  

In the file http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js onmousedown function has the code below. This will stop the event from the default behaviour and in cases stop captured/bubbled. You may want to look at these or the way event are being handled by the libraries.

在文件http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js onmousedown函数中有以下代码。这将使事件从默认行为中停止,并在停止捕获/冒泡的情况下。您可能希望查看这些或库处理事件的方式。

e.preventDefault()

Here is more on how to stop JQuery propagation and regular behaviour.

以下是关于如何停止JQuery传播和常规行为的更多信息。

event.preventDefault() vs. return false What is event bubbling and capturing?

event.preventDefault()与return false什么是事件冒泡和捕获?

#3


0  

The reason you cannot swipe up and down is likely due to that the "swipe" event is hogging the "movestart" or "move" event.

您无法向上和向下滑动的原因可能是由于“滑动”事件占用了“movestart”或“move”事件。

I ran into a similar problem once when using this plugin: http://stephband.info/jquery.event.swipe/

使用此插件时遇到类似的问题:http://stephband.info/jquery.event.swipe/

Their solution as pointed on on their website was to call the preventDefault method on the event to keep it from blocking as seen here.

他们在网站上指出的解决方案是在事件上调用preventDefault方法,以防止阻塞,如此处所示。

jQuery('.mydiv')
.on('movestart', function(e) {
  // If the movestart is heading off in an upwards or downwards
  // direction, prevent it so that the browser scrolls normally.
  if ((e.distX > e.distY && e.distX < -e.distY) ||
      (e.distX < e.distY && e.distX > -e.distY)) {
    e.preventDefault();
  }
});

I have no experience with jQuery mobile, but i would reckon the problems are similar.

我没有使用jQuery mobile的经验,但我认为问题是类似的。