Question

我希望在页面之间切换时有实时响应。这将用用户轻扫手势以1：1的方式“拖动”页面，同时暂时显示两个页面的部分。如果滑动覆盖了所需的最小移动，则页面将切换（“快照”）到下一页，否则页面将返回到先前显示的页面。这在电子书阅读器中很常见。这是一个example of this concept switching images（例子似乎只是WebKit。）

目前，您必须完成滑动，然后更改页面。

这是我目前的代码（非常感谢Phill Pafford）：

JSFiddle

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Application</title>

    <link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0/css/themes/default/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
    <section id="page1" data-role="page">
        <header data-role="header"><h1>jQuery Mobile</h1></header>

        <div data-role="content" class="content">
            <p>First page!</p>
        </div>
        <footer data-role="footer"><h1>O'Reilly</h1></footer>
    </section>

    <section id="page2" data-role="page">
        <header data-role="header"><h1>jQuery Mobile</h1></header>

        <div data-role="content" class="content">
            <p>Second page!</p>
        </div>
        <footer data-role="footer"r><h1>O'Reilly</h1></footer>
    </section>

    <section id="page3" data-role="page">
        <header data-role="header"><h1>jQuery Mobile</h1></header>

        <div data-role="content" class="content">
            <p>Third page!</p>
        </div>
        <footer data-role="footer"><h1>O'Reilly</h1></footer>
    </section>    
</body>
</html>

jQuery的：

(function($) {
    var methods = {
        init : function(options) {
            var settings = {
                callback: function() {}
            };

            if ( options ) {
                $.extend( settings, options );
                }

            $(":jqmData(role='page')").each(function() {
                $(this).bind("swiperight", function() {
                    var nextPage = parseInt($(this).attr("id").split("page")[1]) - 1;
                    if (nextPage === 0) 
                        nextPage = 3;

                    $.mobile.changePage("#page"+nextPage, {
                            transition: "slide",
                            reverse: false
                        });
                    });                        

                $(this).bind("swipeleft", function() {
                    var nextPage = parseInt($(this).attr("id").split("page")[1]) +1;
                    if (nextPage === 4) 
                        nextPage = 1;

                    $.mobile.changePage("#page"+nextPage, {
                        transition: "slide",
                        reverse: true
                    });
                });
            })
        }
        }

    $.fn.initApp = function(method) {
        if ( methods[method] ) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } 
        else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } 
        else {
            $.error( 'Method ' + method + ' does not exist' );
        }
    }
    })(jQuery);

$(document).ready(function(){
    $().initApp();
});

如何整合这种实时切换？

Answer 1

我可以使用iDangero.us编写的Swiper jQuery插件来完成此操作。虽然我不是在寻找另一种代码解决方案，而是使用现有的jQuery库，但这似乎是目前最好和唯一的选择。我将不得不将我的页面从jQuery Mobile使用的格式切换到Swiper格式。

来自他们示例的HTML结构：

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide">
        <div class="title">Slide 1</div>
      </div>
      <div class="swiper-slide blue-slide">
        <div class="title">Slide 2</div>
      </div>
      <div class="swiper-slide orange-slide">
        <div class="title">Slide 3</div>
      </div>
      <div class="swiper-slide green-slide">
        <div class="title">Slide 4</div>
      </div>
      <div class="swiper-slide pink-slide">
        <div class="title">Slide 5</div>
      </div>
      <div class="swiper-slide red-slide">
        <div class="title">Slide 6</div>
      </div>
      <div class="swiper-slide blue-slide">
        <div class="title">Slide 7</div>
      </div>
      <div class="swiper-slide orange-slide">
        <div class="title">Slide 8</div>
      </div>
    </div>
    <div class="pagination"></div>
  </div>
  <script src="js/jquery-1.10.1.min.js"></script>
  <script src="js/idangerous.swiper-2.1.min.js"></script>
  <script>
  var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true
  })
  </script>

可以在Swiper project on GitHub下载代码和示例。

如果有人仅使用jQuery或jQuery Mobile回答如何做到这一点，我会将最佳答案转换为你的答案。

通过实时响应转换在页面之间滑动

1 个答案: