我将 jquery mobile 1.0 与 swipejs 结合使用。 swipejs库用于允许在图像轮播上进行移动滑动手势。但是，我在 Android 2.2.3 (Motorola Droid) 和其他 Android 设备上遇到了一个问题，其中选择列表(与 swipejs 在同一页面上)根本不起作用。选择列表出现，但 native 选项菜单不会弹出，单击它们根本无济于事。我不仅能够将其缩小到 swipejs，而且还能缩小到 swipejs 中的特定行。
style.webkitTransform = 'translate3d(' + -(index * this.width) + 'px,0,0)';
transalate3d css 行为似乎以某种方式干扰了 jquery 移动选择列表。我发现了很多关于 Android 上 jquery 移动选择列表脆弱性的报告 (https://github.com/jquery/jquery-mobile/issues/1051)。并且已经能够创建一个相当简单的示例页面来展示这种行为。我的解决方法是更改 translate3d 以在 swipejs 库本身中进行翻译。但我想知道是否有人更好地了解 translate3d 的作用以及它可能如何影响 jquery mobile 可能会提出更好的解决方案，或者这是 jqm 或 swipejs 的错误？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="/images/mobile/homeIcon.png" />
<link rel="apple-touch-startup-image" href="/images/mobile/splash.png" />
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="main">
<header data-role="header">
</header>
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-choice-1">
Shipping method:</label>
<select name="select-choice-0" id="select-choice-1" data-theme="a">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div id="divProductImagesCarousel">
<ul>
<li><a href="image_0.jpg">
<img width="250" height="250" src="image_0.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_1.jpg">
<img width="250" height="250" src="image_1.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_2.jpg">
<img width="250" height="250" src="image_2.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_3.jpg">
<img width="250" height="250" src="image_3.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_4.jpg">
<img width="250" height="250" src="image_4.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_5.jpg">
<img width="250" height="250" src="image_5.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_6.jpg">
<img width="250" height="250" src="image_6.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_7.jpg">
<img width="250" height="250" src="image_7.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_8.jpg">
<img width="250" height="250" src="image_8.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_9.jpg">
<img width="250" height="250" src="image_9.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
</ul>
</div>
</div>
</div>
<script src="https://raw.github.com/bradbirdsall/Swipe/master/swipe.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var productImagesCarousel = document.getElementById('divProductImagesCarousel');
window.mySwipe = new Swipe(productImagesCarousel);
});
</script>
</body>
</html>
最佳答案
是的，jQueryMobile有自己的滑动功能
但是! swipeJS 太棒了! 而且您仍然可以使用它!
这让我进行了大量调查，但我找到了适合我的解决方案。
基本上，只需将所有 swipejs 内容放入 $(document).ready(function(){
像这样:
<script type="text/javascript">
// outside ready function so that buttons still have a var to attach function calls to like slider.next()
var slider;
// process AFTER jquery mobile.
// i "think" the problem that somehow jquery mobile stops swipejs from detecting the width of the div (in the setup function)
$(document).ready(function(){
slider = new Swipe(document.getElementById('myslider'), {
callback: function(e, pos) {
// some callback code here
}
});
});
</script>
我认为这不是 JS 中的冲突——也许吧。 这会强制在最后处理 swipejs， 并且大概是在任何 jquerymobile 功能搞砸之后。
我是 JS 的新手，所以我不知道这个函数与其他“最后执行”类型的函数有何不同。我想这可能会导致其他讨厌的冲突。 如果有人想用更好的功能(以及为什么)发表评论，那也很好。
关于android - Jquery Mobile 和 Swipe JS 不兼容导致选择列表无法在 Android 上运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9383077/