Phonegap-(Android/iphone) 多张图片的图库有问题吗?

Posted

技术标签:

【中文标题】Phonegap-(Android/iphone) 多张图片的图库有问题吗?【英文标题】:Phonegap-(Android/iphone) Image gallery with multiple images is giving problems? 【发布时间】:2012-09-08 07:57:53 【问题描述】:

我使用 jQuery mobile 制作了 html5、javascript 和 CSS 的图片库。 IE Phonegap 平台没问题。 图像是动态来的并加载到其中,如下所示:http://torontographic.com/wordpress/mouseSwipe/mouseSwipe.html

鼠标上方滑动滑块:

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

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

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

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

【问题讨论】:

嗨!你能提供一些代码吗? “两个事件同时发生”是什么意思?您是否遭受两次触发的“点击”事件? 【参考方案1】:

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

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

我认为这也是让您无法点击转到指定页面的原因。

如果你想听听我的真实意见,我会选择一个不同的库,也许一个只关注移动设备的可滑动性,然后单独处理桌面功能(不过,如果你使用的是 PhoneGap,很可能你不是'甚至将其发布到桌面的网络平台)。如果它要在网络上,你可以使用modernizr(或类似的)来确定设备是否支持触摸输入,然后实现如下:

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

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

【讨论】:

【参考方案2】:

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

e.preventDefault()

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

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

【讨论】:

【参考方案3】:

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

我在使用这个插件时遇到过类似的问题: http://stephband.info/jquery.event.swipe/

他们在他们的网站上指出的解决方案是在事件上调用 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();
  
);

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

【讨论】:

以上是关于Phonegap-(Android/iphone) 多张图片的图库有问题吗?的主要内容,如果未能解决你的问题,请参考以下文章

用于 Cordova Android/iPhone 应用程序开发的 UI [关闭]

如何添加插件新的cordova /phonegap?

在 Blackberry(服务器端)中为 PhoneGap App 推送通知

从单个链接打开原生应用商店?

HTML5 游戏(画布)- UI 技术?

为啥这个脚本不能在 android、iphone、ipad 等移动设备上运行?