Question

我正在使用jquery mobile 1.0和swipejs。 swipejs库用于允许图像轮播上的移动滑动手势。但是，我在Android 2.2.3（摩托罗拉Droid）和其他Android设备上遇到了一个问题，其中选择列表（与swipejs在同一页面上）根本不起作用。显示选择列表但不会弹出本机选项菜单，单击它们不会执行任何操作。我不仅可以将其缩小到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>

Answer 1

是的，jQueryMobile有自己的滑动功能

BUT！ 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很新，所以我不知道这个函数与其他“最后这个”类型函数的区别。我想这可能会导致其他令人讨厌的冲突。如果有人想用更好的功能评论（以及为什么），这也会很棒。

Answer 2

使用jQuery Mobile时不需要刷卡库。您可以向swipeleft和swiperight事件注册事件处理程序：

$(document).delegate('#divProductImagesCarousel', 'swipeleft swiperight', function (event) {
    alert('You just ' + event.type + 'ed!');
});

Answer 3

最好使用jquerymobile“pageshow”方法，而不是pageinit或其他东西。下面的代码示例：

$(document).live('pageshow', function(){
  //put the swipejs code here.
}

Jquery Mobile和Swipe JS不兼容导致选择列表无法在Android上运行

3 个答案: