原生 js 实现 h5 上拉加载以及 jQuery 实现列表回到顶部

实现原理

当前滚动条的位置 + 当前可视范围的高度 = 文档的高度

实现方法

   
 
    
加载中...

$(document).ready(function () {
	let pageIndex = 1;
	getlist()
	$('.top-img').click(() => {
        $('html,body').animate({
            scrollTop: 0
        }, 500);
    });
	// 获取当前滚动条的位置 
   function getScrollTop() {
       var scrollTop = 0;
       if (document.documentElement && document.documentElement.scrollTop) {
           scrollTop = document.documentElement.scrollTop;
       } else if (document.body) {
           scrollTop = document.body.scrollTop;
       }
       return scrollTop;
   }
   
// 获取当前可视范围的高度 
 function getClientHeight() {
       var clientHeight = 0;
       if (document.body.clientHeight && document.documentElement.clientHeight) {
           clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
       } else {
           clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
       }
       return clientHeight;
   }
   
// 获取文档完整的高度 
 function getScrollHeight() {
     return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
 }

	$(window).scroll(function () {
		// 回到顶部按钮展示判断
		if ($(window).scrollTop() >= 200) {
              $('.top-img').fadeIn();
          } else {
              $('.top-img').fadeOut();
          }
          
	     if (getScrollTop() + getClientHeight() == getScrollHeight()) {
	         $('.refreshText').css('display', 'block')
	         setTimeout(() => {
	             pageIndex++
	             getlist()
	             console.log('上拉')
	         }, 500);
	     }
	 });

	// 获取列表数据并动态插入数据
    function getlist() {
       let url2 = 'https://www.xxx.com'
       $.get(url2, function (res) {
           let obj2 = JSON.parse(res).data
           const list2 = []
           Object.keys(obj2).forEach(function (item, index) {
               this.push(obj2[item])
           }, list2)
           for (var i = 0; i < list2.length; i++) {
               $("#thelist").append(
                   `

			           

			               ${list2[i].imageInfo.imageList[0].url}">
			               

			                   
${list2[i].imageInfo.imageList[0].url}','${list2[i].skuName}','${list2[i].couponInfo.couponList[0]?list2[i].couponInfo.couponList[0].discount:''}','${list2[i].priceInfo.price}','${list2[i].couponInfo.couponList[0]?list2[i].couponInfo.couponList[0].link:''}','${list2[i].skuId}','${list2[i].materialUrl}')">推荐
			                   
${list2[i].couponInfo.couponList[0]?'':'set-margin'}">${list2[i].skuName}
			                   
${list2[i].couponInfo.couponList[0]?'':'hide'} ">
			                       券
			                       
￥${list2[i].couponInfo.couponList[0]?list2[i].couponInfo.couponList[0].discount: '0'}
			                   
			                   ￥${list2[i].priceInfo.price}
			               
			           
			       
`
               )
           }
       });
   }
});