用js实现下拉滑页效果

用js实现下拉滑页效果

代码

1. js内容

/* 下拉滑页 */
   $(window).scroll(function(){

         var scrollTop = $(this).scrollTop();   //滚动条距离顶部的高度
         //alert(scrollTop);
         var scrollHeight = $(document).height();           //当前页面的总高度
        //alert(scrollHeight);
         var windowHeight = $(this).height();  //当前可视的页面高度
        //alert(windowHeight);
         if(scrollTop + windowHeight >= scrollHeight - 20)  {   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
             var pageStart = parseInt($("#pageStart").val())+4;
             //alert(pageStart);
             $("#pageStart").val(pageStart);
             var pg = Dd("pageStart").value;
             console.log(pg);
             //alert(pg);
             /* $("#pageSize").val(pageSize); */
             /* window.location.href="mall.php?action=list&catid=4&pageSize="+pageSize; */


             if(pg>($xlcount-1)){
                //将input元素设置为disabled
                 /* $("#pageStart").val(0); */
               return false;
             } 

           $.ajax({
                 type:'post',
                 data:"pageStart="+pageStart,
                 url:'qysp_pt.php?userid={$userid}&flag=getmore',
                 success:function(data){ 
                    //alert(data);
                    var obj = eval('(' + data + ')');
                    console.log(obj);
                    for(var i = 0;i<obj.length;i++){      



                        var html= "<li>"
                        +"<a href='mall_detail.php?item="+obj[i].itemid+"'>"
                        +" <img src='"+obj[i].thumb+"' />"
                        +"<div class='pro_info'>"
                        +"<p class='p_title left'>"+obj[i].title+"</p>"
                        +"<p class='p_price left'>￥"+obj[i].price+"</p>"
                        +"<p class='p_deal right'>成交"+obj[i].sales+"笔</p>"
                        +"<p class='clear'></p>"
                        +"</div></a></li>";


                        $("#zxgy").append(html);

                    }   
              } 
         }) 
         } 
     }) 

2.html内容

<input type="hidden" id="pageStart1" value="0"/>

3.后台内容

   if($flag=='getmore'){

        //limit语句省略

        $string = json_encode($gy);   //对查出来的$gy进行转码  
        exit($string); 
    } 

思路

1. pageStart随着页面下拉不断改变
2. 将pageStart的值传递给后台，以便后台进行limit语句
3. 如果成功则拼接html