javascript-- 基於jQuery的模仿移動端上拉加載更多控件

簡單實現手機端上拉加載更多，經過觸發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 });