jQuery+axjx实现select下拉框分页与触底请求接口

本文链接：https://blog.youkuaiyun.com/iocncc/article/details/132622003

本文详细描述了一个使用JavaScript实现的滚动加载和分页功能，当用户滚动到页面底部时，通过AJAX请求动态加载更多内容，适用于内容列表场景。

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

<script>
    <!-- 实现滚动条滚动start -->
    var pageNum = 1;  // 当前页码
    var pageSize =10; // 当前每页条数
    var pageCount=0;//总页数
    var winH = $('#div1').height();//页面可视区域高度  
    var p=0, t=0; // 顶部和底部的距离
    $(function(){
        getData();//初始获取数据，加载数据事件
        //鼠标滚动事件   
        $('#div1').scroll(function() {
            var pageH = $('#result').height(); //当前文档总高度
            var scrollT = $('#div1').scrollTop();  //滚动条top的值   
            var bottomH = (pageH - winH - scrollT) / winH;  // 当前所滚动位置到底部距离
            p = $(this).scrollTop(); //顶部距离
            if(t <= p){ // 判断是否下滚  
                if (bottomH < 0.01) {  
                   if (pageNum !== pageCount) {
                       pageNum++;
                       getData();
                   }else{ //没有数据
                      $(".nodata").show().html("别滚动了，已经到底了...");
                   }
                }
            }
            setTimeout(function(){t = p;},2000);//延时2秒   
        });  

    })
    function getData() {
        let params = {
			'page_size': 15,
			'current_page': coursePage,
			'knowledge': ''
		},url = 请求地址, res = getData(url,params), data = '';
		data = dedata(res.data);
		if(res.code === 1000){
			let str = '';
			data.map(item=>{
				str += `<li data-value="${item?.value}">${item?.name}</li>`
			})
			$("#result").append(str)
			coursePageCount = res.totalPage
		}
    }
   <!--end-->
</script>

<div id="div1" class="nui-scroll">
     <div id="result"> </div>  
     <div class="nodata"></div>           
 </div>

.nui-scroll{
         border: 1px solid #000;
         width: 450px;
         height: 300px;
         overflow-y:scroll
       }
      .item-info {
          height: 30px;
          font-size:18px;
          background:  #339999;
          color: #fff;
      }
     .nodata{
         font-size:20px;
         text-align:center;
         margin-bottom: 15px;
     }
     span{
         margin-left: 15px;
}