javascript-- 基于jQuery的模仿移动端上拉加载更多控件

时间：2022-12-22 20:48:58

简单实现手机端上拉加载更多，通过触发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 });

 

标签：

相关文章