0

我目前正在探索 jQuery Mobile 的功能。我对 Google Play 商店处理水平滑动的方式很感兴趣，因此，当用户向右滑动点击时，视图应该滑动到下一页，当用户向左滑动点击时，视图应该滚动到上一页，如果有的话。我知道这可以使用本机 jQuery 来完成，但我还不熟悉移动设备上的事件，我确信已经有一个内置的功能。

我想先用 Android 设备试试这个，如果可能的话，用 iPad 和 iPhone。任何人都可以指导我实现这一目标的方法吗？

顺便说一句，我在这里不是在谈论浏览器历史记录，如果可能的话，可能只是一些 div、页面。

4

2 回答 2

0

这是可以做到的，但你会很失望。

可以这样实现：

  1. 一个 HTML 中的多个页面。每个页面都将绑定向左滑动和向右滑动。触发事件时，changePage() 函数将转换到上一页/下一页。这听起来很棒，并且在桌面浏览器上运行良好，但在 Android 手机上使用 phonegap 执行时会失败。在 Android 手机上，转换仍然是一个大问题，iOS 的表现更好但不是很多。

    像这样的东西：

    $('#page-two').on('#page-two', 'swipeleft', function () {
    //next page
    $.mobile.changePage($('#page-three'));
}).on('#page-two', 'swiperight', function () {
    //prev page
    $.mobile.changePage($('#page-one'), { reverse : true });
});

    jQuery Mobile 支持滑动事件，因此不需要 3rd 方插件。

  2. 使用 jQuery Mobile 轮播插件，例如：http: //jsfiddle.net/blackdynamo/yxhzU/

    原插件：https ://github.com/blackdynamo/jQuery-Mobile-Carousel

    与页面转换不同，这个插件会给你更好的手机感觉。

  3. 您选择的任何路径都将通过第二个标题内的导航栏实现：

    <div data-theme="a" data-role="header">
    <h3>
        First Page
    </h3>
    <a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-theme="a" data-role="header">
    <div data-role="navbar">
        <ul>
            <li><a href="#">Page One</a></li>
            <li><a href="#">Page Two</a></li>
            <li><a href="#">Page Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div>
于 2013-01-16T22:33:36.447 回答
0

解决方案#1——这应该是最简单的方法：

    <script>
        $(document).delegate("#homepage", 'pageinit', function (evt) {
            $(this).bind("swipeleft", function (e) {
                $.mobile.changePage("#anotherpage", {
                    transition : 'slide'
                });
            });
        }).delegate("#anotherpage", 'pageinit', function (evt) {
            $(this).bind("swiperight", function (e) {
                $.mobile.changePage("#homepage", {
                    transition : 'slide',
                    reverse    : true
                });
            });
        });         
    </script>

解决方案#2——这个更简单：

$('#homepage').bind('swipeleft', function() {
    $.mobile.changePage('#anotherpage', {transition: 'slide', reverse: false});
});

$('#anotherpage').bind('swiperight', function() {
    $.mobile.changePage('#homepage', {transition: 'slide', reverse: true});
});
于 2013-01-17T04:34:35.220 回答