简单实现手机端上拉加载更多,通过触发trigger()事件,触发原先已经写好的请求
css样式
.more{ padding: 10px 10px; height:50px; background:#fff; background-clip:content-box; text-align: center; line-height:50px; font-family:"Microsoft Yahei"; display: none; }
html代码
<div class="more" data-page="1" data-rname=""> 加载更多 </div>
js代码
1 /** 2 *实现滚动效果 3 */ 4 $(function(){ 5 var clientH = $(window).height();//屏幕高度 6 var h =$(document).height()- $(window).scrollTop(); 7 var timer = null; 8 $(window).on("touchmove",function(){ 9 var scrollH = $(document).height(); 10 h = scrollH-$(this).scrollTop(); 11 if(clientH >= h){ 12 $(".more").show(); 13 timer = setTimeout(function(){ 14 $(".more").html("松开加载"); 15 }, 1000); 16 }else if(clientH >= h-$(".more").height()){ 17 18 $(".more").html("加载更多"); 19 $(".more").hide(); 20 } 21 }); 22 //记录开始按下到松开的时间 23 24 var startTime, endTime; 25 $(window).on("touchstart",function(event){ 26 startTime = new Date().getTime(); 27 $(".more").html("加载更多"); 28 }); 29 $(window).on("touchend",function(event){ 30 h =$(document).height()- $(window).scrollTop(); 31 if(clientH >= h){ 32 endTime = new Date().getTime(); 33 if(endTime - startTime > 900){ 34 $(".more").trigger("click"); 35 $(".more").show(); 36 $(".more").html("加载中..."); 37 }else{ 38 clearTimeout(timer); 39 $(".more").html("加载更多"); 40 $(".more").hide(); 41 42 } 43 }else{ 44 clearTimeout(timer); 45 $(".more").html("加载更多"); 46 $(".more").hide(); 47 48 } 49 50 }); 51 });
时间: 2024-11-10 14:16:37