javascript-- 基於jQuery的模仿移動端上拉載入更多控制項

標籤：font   doc   timer   color   back   asc   動效   name   控制項   

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

 

javascript-- 基於jQuery的模仿移動端上拉載入更多控制項