2

私は状況と戦っていて、誰かが私がどこで間違っているのかを理解できるかどうかを確認するために、ここに問題を投稿すると考えました。

私がやっていることの背後にある考え方は次のとおりです。

ユーザーが左右にスクロールして前後に移動できるページ（実際にはiPadアプリケーション）があります。ユーザーが左にスワイプする（前方に移動する）たびに、新しい768pxページ（幅）を表示します。各divの幅は768ピクセルであり、50以上のdivを持つことができるため、その背後にある考え方は、先頭のページを削除することでした。

したがって、画面には常に4つのdivがあり、一度に1つのdivのみが表示されます。したがって、起動時に次のようなものがあります。

<content>
<div id='wrapper_1'>content</div>
<div id='wrapper_2'>content</div>
<div id='wrapper_3'>content</div>
<div id='wrapper_4'>content</div>
</content>

ユーザーが右にスワイプしたら、wrapper_1を削除し、wrapper_5を追加して、基本的にすべてを適切に再配置します。

私が抱えている問題は、先頭のdivを削除するたびに、コンテンツdivの幅が明らかに変化し、表示しているページが失われることです。したがって、私の頭の中の明らかな「修正」は、削除したdivを考慮してコンテンツを再配置することでした。

しかし、私はjqueryオフセットメソッドと戦っています。これを間違って使用しているか、何かを見落としています。 

 $('#wrapper_'+this.pageArray[0]).remove();
 this.pageArray.shift();    


 var n = pageIndex - 1;
 var t = 768 * n;

 $("#content").offset({ left: t})

を配列に格納することで、ページ上のdivが何であるかを追跡しています。ページを追加するたびに、基本的にdivでremove（）を実行してから、配列でshiftを実行します。問題は、オフセットが期待どおりに機能しないことです。基本的に、左の値が絶対的なx位置を与えるようには見えません。

まず、このアプローチは正しいと思われますか？第二に、私の理解/オフセットの実装は正しくありませんか？

編集：

スレッドをフォローしている人にとって、私の最大の問題は、ジェスチャーをどのように処理していたかということだったようです。いくつかのイベントの競合があったようです。ジェスチャーライブラリを使用することで、私の側の多くの混乱が確実に解消されたようです。

以下は私の更新されたコードで、うまく機能しているようです。アプローチを批評してください。

    <html>
    <head>
<style>
    .wrapper{
        height: 200px;
        width: 600px;
        overflow: hidden;
    }
    .button_wrapper{
        width: 600px;
    }
    #content{
        background-color: #F00;
        height: 200px;
        width: 3000px;
    }
    .page{
        width: 200px;
        height: 200px;
        float: left;
        background-color: #FF0;
    }
    #wrapNext{
        width: 100px;
        height: 20px;
        background-color: #FF0000;
        float: right;
        cursor: pointer;
    }
    #wrapPrev{
        width: 100px;
        height: 20px;
        background-color: #FF0000;
        float: left;
        cursor: pointer;
    }

    .site_wrap > .slides_wrap {
        margin-bottom: 1em;
        margin-left: -8px;
        margin-right: -8px;
    }

    .img_slides_wrap {
        width: 784px;
        border: 8px solid #333333;
        background-color: #444444;
        overflow: hidden;
    }

    .img_slide {
        padding: 0;
    }

    .js .img_slide {
        /* Overide template's height transitions. */
        width: 100%;
        height: auto;
    }

    .slide_buttons_index {
        text-align: center;
    }

    .notransition,
    .notransition .slide {
        -webkit-transition-duration: 0 !important;
           -moz-transition-duration: 0 !important;
            -ms-transition-duration: 0 !important;
                transition-duration: 0 !important;

        -webkit-transition-delay: 0 !important;
           -moz-transition-delay: 0 !important;
            -ms-transition-delay: 0 !important;
                transition-delay: 0 !important;
    }

    @media screen and (max-width: 640px) {
        .img_slides_wrap {
            width: 100%;

            -webkit-box-sizing: content-box;
               -moz-box-sizing: content-box;
                -ms-box-sizing: content-box;
                    box-sizing: content-box;
        }
    }
</style>
    </head>
    <body>
<div class='wrapper'>
    <div id='content' class='img_slides_wrap slides_wrap wrap'>
        <div id='page0' class='page'>Page 0</div>
        <div id='page1' class='page'>Page 1</div>
        <div id='page2' class='page'>Page 2</div>
        <div id='page3' class='page'>Page 3</div>
    </div>
</div>
<div class='button_wrapper'>
    <div id='wrapPrev'>
        <div id="prev">Previous</div>
    </div>
    <div id='wrapNext'>
        <div id="next">Next</div>
    </div>
</div>
    </body>
    <script src="jquery.min.js"></script>
    <script src="jquery.event.move.js"></script>
    <script src="jquery.event.swipe.js"></script>

    <script>
    $(document).ready(function() {

var counter = 4;
var selectedPageIndex = 1;
var lastKnownX = 0;
var articleListLength = 10; // testing

$("#next").click(function() {
  showNext();
});

$("#prev").click(function() {
  showPrev();
});


function showNext(){
    if (counter <= articleListLength + 1){
        // first remove the leading div
        var leadingDiv = $('#page'+(counter - 4));
        leadingDiv.animate({ width: '0px' }, 250, function() {
            $(this).remove();
        });
        var html = "<div id='page"+counter+"' class='page img_slide slide'>Page "+counter+"</div>";
        $('#content').append(html);
        counter ++;
        selectedPageIndex ++;   
    }
}

function showPrev(){
    if(counter >= 5){
        var target = selectedPageIndex - 1;
        var leadingDiv = $('#page'+(target));
        var newLeadingDiv = $('#page'+(target - 1));

        var html  = "<div id='page"+(target-1)+"' class='page img_slide slide' style='width:0px'>Page "+(target-1)+"</div>";
        $(html).insertBefore('#page'+(selectedPageIndex-1));

        $('#page'+(target - 1)).animate({ width: '200px' }, 250, function() {

        });
        var removalTarget = $('#page'+(selectedPageIndex + 2));

        removalTarget.remove();

        counter --;
        selectedPageIndex --;  
    }
}

var wrap = jQuery('.slides_wrap'),
    width = wrap.width();

    $('#content')

    .on('swipeleft', function(e) {
        showNext();
    })

    .on('swiperight', function(e) {
        showPrev();
    })


    });
    </script>
    </html>
4

1 に答える 1

1

モバイルアプリ（android、iphone）およびブラウザー用の優れたswipeviewプラグインがここにあります：http：//cubiq.org/swipeview。

必要な方法で正確に機能します（ループ効果を無効にすることができます）-これはデモページです。

プラグインを使用したくない場合は、プラグインの使用方法に関するアイデアが役立つ場合があります。

于 2013-02-07T16:11:33.360 に答える