android - 动态创建的 在 html5 中水平滚动

Question

我正在使用 Phonegap + jQueryMobile + Android。当我创建我的 <li>静态它工作正常，但动态它不像静态那样工作。请检查我在下面显示的代码中犯了什么错误:

在 jquery 中:-

    $(document).unbind('pageinit').bind('pageinit', function () {

          callMenuConnection(); 

      });
       function callMenuConnection() {  
        $.support.cors = true;
           $.ajax({
                type: "GET",
                url: "one.html",
                contentType: "text/xml",
                dataType: "xml",
                data: "",
                cache:false,
                processData:false,
                crossDomain:true,
                success: processSuccess,
                error: processError
            }); 
      }

      function processSuccess(data) {
             $(data).find("category").each(function () {     
             var id = $(this).find('id').text();
             var title = $(this).find('title').text();
            $('#cat_list').append('<li><span><a href="#" data-role="button" data-inline="true">'+title+'</a></span></li>');
            });
      }

         function processError(data)
           {
               alert("error");
           }


      $(function(){           
var step = 1;
var current = 0;
var maximum = $(".categories ul li").size();
var visible = 2;
var speed = 500;
var liSize = 120;
var height = 60;    
var ulSize = liSize * maximum;
var divSize = liSize * visible; 

$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
$(".categories ul li").css("list-style","none").css("display","inline");
$(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");

$(".categories").swipeleft(function(event){
    if(current + step < 0 || current + step > maximum - visible) {return; }
    else {
        current = current + step;
        $('.categories ul').animate({left: -(liSize * current)}, speed, null);
    }
    return false;
});

$(".categories").swiperight(function(){
    if(current - step < 0 || current - step > maximum - visible) {return; }
    else {
        current = current - step;
        $('.categories ul').animate({left: -(liSize * current)}, speed, null);
    }
    return false;
});         
 });

在 CSS 中:-

   div.sc_menu {
          /* Set it so we could calculate the offsetLeft */
              position: relative;
               height: 145px;
               width: 300px;
               overflow: auto;
               }
ul.sc_menu {
display: block;
height: 110px;
/* max width here, for users without javascript */    
width: 1500px;   
padding: 15px 0 0 15px; 
/* removing default styling */
margin: 0;
background: url('navigation.png');        
list-style: none;
 }
    .sc_menu li {
display: block;
float: left;    
padding: 0 4px;
  }
    .sc_menu a {
display: block;
text-decoration: none;
}
       .sc_menu span {
  /* display: none; */
  margin-top: 3px;
  text-align: center;
  font-size: 12px;    
  color: #fff;
   }
 .sc_menu a:hover span {
display: block;
 }
     .sc_menu img {
    border: 3px #fff solid;    
    -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
      }
       .sc_menu a:hover img {
          filter:alpha(opacity=50);    
           opacity: 0.5;
        }


    /* Here are styles for the back button, don't look at them */
  #back {
   display: block;
    width: 500px;
     text-align: center;
     color: #003469;
     font-size: 16px;
 }

在 Html5 中:-

    <div data-role="page" data-theme="b" id="jqm-home">            
            <div class="categories">                
                  <ul id="cat_list"></ul>               
            </div>
     </div>

Answer 1

尝试jqMobile + iScrollView + 无限滚动。

更多详情请查看: Infinite Scrolling

您还可以在插件网站上看到演示 https://github.com/watusi/jquery-mobile-iscrollview