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代碼

/**
 *實現滾動效果 
 */
$(function(){
    var clientH = $(window).height();//屏幕高度
    var h =$(document).height()- $(window).scrollTop();
    var timer = null;
    $(window).on("touchmove",function(){
        var scrollH = $(document).height();
        h = scrollH-$(this).scrollTop();
        if(clientH >= h){
            $(".more").show();
            timer = setTimeout(function(){
                $(".more").html("松開加載");
            }, 1000);
        }else if(clientH >= h-$(".more").height()){
            
            $(".more").html("加載更多");
            $(".more").hide();
        }
    });
    //記錄開始按下到松開的時間

    var startTime, endTime;
    $(window).on("touchstart",function(event){
        startTime = new Date().getTime();
        $(".more").html("加載更多");
    });
    $(window).on("touchend",function(event){
        h =$(document).height()- $(window).scrollTop();
        if(clientH >= h){
            endTime = new Date().getTime();
            if(endTime - startTime > 900){
                $(".more").trigger("click");
                $(".more").show();
                $(".more").html("加載中...");
            }else{
                clearTimeout(timer);
                $(".more").html("加載更多");
                $(".more").hide();
                
            }
        }else{
            clearTimeout(timer);
            $(".more").html("加載更多");
            $(".more").hide();
            
        }
        
    });
});