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 [关闭]