用js实现下拉滑页效果

最新推荐文章于 2022-03-01 15:18:41 发布

生唐

最新推荐文章于 2022-03-01 15:18:41 发布

阅读量2.8k

点赞数

分类专栏： php js

本文链接：https://blog.youkuaiyun.com/weixin_39525197/article/details/80936812

版权

php 同时被 2 个专栏收录

7 篇文章

订阅专栏

6 篇文章

订阅专栏

本文介绍如何利用JavaScript实现下拉滑动时加载更多页面内容的效果。通过跟踪页面滚动位置，当达到一定条件时，向后台发送请求，获取新的数据，并将其动态插入到页面中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用js实现下拉滑页效果

代码

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); 
    }

思路

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