0

我正在尝试在 Jquery Mobile 中的 listview（垂直滚动）中实现这种水平滑动，下面我附上了我的意思的示例，但那是在 Android 中。我想知道如何在 Jquery Mobile 中实现这一点。这是 Airbnb 应用程序中的功能 - 一个可以垂直滚动的列表视图，但同时每个列表都有多个可以水平滚动的图像。

在列表视图上滑动项目，垂直边距很小

我试图通过将列表加载到ajax中来实现它，然后将图像嵌套在另一个for循环中并将其放入swipers中。但问题是 swiper 没有出现，而且布局也一团糟。

<script>
     $( "#form" ).submit('pageinit',function( event ) {
          $("#newContent2").empty();
          var values = $(this).serialize();
         console.log(values);
                $.ajax({
   type: "POST",

   url: "http://test.com/search.php",
   data: values,
                  dataType:'json',
            success: function(data){ 
               console.log(data);

    var $el = $('#list');
    var listView = new infinity.ListView($el);

    for (var i=0; i<50; i++) {
        var listing = data[i].listing;
        var Location = data[i].Location;
        var date = data[i].date;     

        var images = data[i].pics.split(',');
        console.log(image);

         for(var j = 0; j<images.length; j++){

       var image3=  "http://test.com/"+images;
        console.log(image3);

                    var image2=" <div class='swiper-slide'><img class='lazy' src='"+ image3 + "' width='100%'  id='viewer'/></div>"

         }

         var myOtherUrl = "list.html?Listingid="  + encodeURIComponent(listingid)+"?Location="+ encodeURIComponent(Location)+ encodeURIComponent(nobed+"?date="+ encodeURIComponent(date));

        $.mobile.pageContainer.pagecontainer( "change", "#pageX", { foo: data[i].listingid, location:data[i].Location } );

        var $newContent = "<li id='indi'><a href='" + myOtherUrl + "'>'"+ image2+ "'</a></li>"             

        +"<div id=two class=col-md-1 style=height:38%> <h9 class=name data-address  href='"+ myOtherUrl +  "'><a id="+"my-button"+">BucketListly</a>"+ "<h9 >&nbsp"+data[i].Location+ "</h9>";

        $("#newContent2").append($newContent);

    var listItems = listView.find('.my-items');
        for(var index = 0, length = listItems.length; index < length; index++) {
            listItems[index].remove();
        }

          var swiper = new Swiper('.swiper-container', {
        loop:false,
      autoResize: true,
    calculateHeight:true,
        onSlideChangeStart: function(){
            $('.swiper-pagination-switch').removeClass('active')
            $('.swiper-pagination-switch').eq(swiper.activeSlide).addClass('active')
        }
    });

    //navigation
    $('.swiper-pagination-switch').click(function(){
        swiper.swipeTo($(this).index());
        $('.swiper-pagination-switch').removeClass('active');
        $(this).addClass('active')
    })

    }
           }
            });
          return false;
  });    

        </script>
4

0 回答 0