鼠標滾動請求加載

時間 2019-11-24

標籤鼠標滾動請求加載简体版

原文原文鏈接

CSS樣式：
*{list-style: none;}
li{background: blueviolet;}
.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    /* 開啓硬件加速 */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
.dropload-down{
    height: 50px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.dropload-load .loading{
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    margin: 6px;
    border: 2px solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
/*加載動畫*/
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

HTML：css

<div class="mui-container content">
	<ul class="lists" style="">
  	</ul>
</div>

　Javascript:html

/**
 * 定義全局變量
 */
var G_WEBBASE = "https://tsch.fromfuture.cn:7712/";
var page; //從第幾頁開始顯示
var size; //每頁顯示幾條數據
var usrid;//患者guid

$(function() {
    //入參
    var page = 0; //頁碼
    var size = 10; //每頁顯示條數
    usrid = "25C60166D8475D16E050AE0AC684EC8A"; //患者guid
    // dropload
    var dropload = $('.content').dropload({
        domDown: {
            domClass: 'dropload-down',
            domRefresh: '<div class="dropload-refresh"style="font-weight: 700;color: #777;font-size: 15px;">↑上拉加載更多</div>',
            domLoad: '<div class="dropload-load" style="font-weight: 700;color: #777;font-size: 15px;"><span class="loading"></span>加載中...</div>',
            domNoData: '<div class="dropload-noData"style="font-weight: 700;color: #777;font-size: 15px;">暫無數據</div>'
        },
        domUp : {
          domClass  : 'dropload-up',
          domRefresh : '<div class="dropload-refresh"style="font-weight: 700;color: #777;font-size: 15px;">↓下拉過程顯示內容-下拉刷新-自定義內容</div>',
          domUpdate : '<div class="dropload-update"style="font-weight: 700;color: #777;font-size: 15px;">↓下拉刷新內容</div>',
          domLoad  : '<div class="dropload-load"style="font-weight: 700;color: #777;font-size: 15px;"><span class="loading"></span>正在刷新</div>'
        },
        distance: 10,
        threshold: "",
        scrollArea: window,
        loadDownFn: function(me) {
            page++;//分頁
            
            $.ajax({
                type: 'GET',
                url: G_WEBBASE+'GZ/v1/usrApp/queryMyOrder?usrid=' + usrid + '&pageNo=' + page + '&pageSize=' + size,
                //async: false,
                timeout: 8000,
                success: function(data) {
                    data = data.trim();
                    data = data.replace(/\n/g, '');
                    data = JSON.parse(data)
                    var data = data.data;
                    if(data.parameterType.length > 0) {
                        var result = '';
                        for(var i = 0; i < data.parameterType.length; i++) {

                            //DOM取數據庫數據
                             
                             var imgurl = " https://tsch.fromfuture.cn/ftp/";

                            var orderstate = data.parameterType[i].orderstate;//支付狀態code
                             
                             result += '<li>';
                             result +=    '<div>';
                             result +=        '<p style="border-bottom: 1px solid #ccc;position: relative;padding-top: 5px;padding-left: 12px;">';
                            result +=             '<img src="'+imgurl + data.parameterType[i].ftpurl+'" alt="" style="width:40px;height: 40px;border-radius:23px;" id="docimg"/>';
                            result +=             '<span style="position: absolute;top: 14px;left: 66px;">'+data.parameterType[i].docname+'</span>';
                            result +=             '<span style="position: absolute;top: 14px;right: 18px;color:red;">'+data.parameterType[i].orderstatename+'</span>';
                             result +=        '</p>';
                             result +=    '</div>';
                             result +=    '<div id="data' + i + '" data-guid="'+data.parameterType[i].orderid+'" class="indent"></div>';
                             result +=    '<p style="padding-left: 15px;">';
                            result +=         '<span style="color:#ADB6D9;font-size: 15px;" id="mingc">建立時間:</span>&nbsp;&nbsp;';
                            result +=         '<span style="font-size:16px;color:#ADB6D9" id="time">2017-08-30</span>';
                             result +=    '</p>';
                             result +=    '<p style="padding-left: 15px;">';
                             result +=        '<span style="font-size:15px;color:#ADB6D9">訂單編號:</span>&nbsp;&nbsp;';
                             result +=        '<span style="font-size:13px;color:#ADB6D9;">'+data.parameterType[i].ordercode+'</span>';
                             result +=    '</p>';
                             result +=    '<p style="padding-left: 15px;">';
                             result +=        '<span style="font-size:15px;color:#ADB6D9">諮詢方式:</span>&nbsp;&nbsp;';
                            result +=        '<span style="font-size:16px;color:#ADB6D9">'+data.parameterType[i].consultationmethodname+'</span>';
                            result +=        '<img src="images/going.png" alt="" style="margin: 0px 20px;float: right;width:20px;height:20px"/>';
                             result +=    '</p>';
                             result +=    '<p style="padding-left: 15px;"><span style="font-size:15px;color:#ADB6D9">訂單金額:</span>&nbsp;&nbsp;';
                             result +=        '<span style="color:red;font-size:16px;">'+data.parameterType[i].orderamount+'</span>';
                             result +=        '<span style="color:red;font-size:16px;">元</span>';
                             result +=    '</p>';
                            result +=     '<div style="height: 45px;border-top: 1px solid #ccc;">';
                            result +=         '<div style="margin-top:5px;overflow: hidden;">';
                                                 if(orderstate == '1'){
                                                     result+=  '<button  type="button" style="float: right;margin-right: 20px;">去支付</button>';
                                                     result+=  '<button  type="button" style="float: right;margin-right: 20px;">取消訂單</button>';
                                                 }else if(orderstate == '2'){
                                                     result+=  '<button  type="button" style="float: right;margin-right: 20px;">去諮詢</button>';
                                                 }else if(orderstate == '3'){
                                                     result+=  '<button type="button" style="float: right;margin-right: 20px;">退款詳情</button>';
                                                 }else if(orderstate == '4'){
                                                     result+=  '<button type="button" style="float: right;margin-right: 20px;">刪除訂單</button>';
                                                 }
                            result +=        '</div>';
                            result +=     '</div>';
                             result += '</li>';
                           
                        }

                    } else {
                        
                        tab1LoadEnd = true;// 數據加載完
                        me.lock();// 鎖定
                        me.noData();// 無數據

                    }
                    // 爲了測試，延遲1秒加載
                    setTimeout(function() {
                        
                        $('.lists').append(result);// 插入數據到頁面，放到最後面
                        me.resetload();// 每次數據插入，必須重置
                        
                    }, 1000);
                },
                error: function(xhr, type) {
                    me.resetload();// 即便加載出錯，也得重置
                }
            });
        }
    });
})

/**
 * dropload
 * 西門(http://ons.me/526.html)
 * 0.9.0(160215)
 */
!function(a){"use strict";function g(a){a.touches||(a.touches=a.originalEvent.touches)}function h(a,b){b._startY=a.touches[0].pageY,b.touchScrollTop=b.$scrollArea.scrollTop()}function i(b,c){c._curY=b.touches[0].pageY,c._moveY=c._curY-c._startY,c._moveY>0?c.direction="down":c._moveY<0&&(c.direction="up");var d=Math.abs(c._moveY);""!=c.opts.loadUpFn&&c.touchScrollTop<=0&&"down"==c.direction&&!c.isLockUp&&(b.preventDefault(),c.$domUp=a("."+c.opts.domUp.domClass),c.upInsertDOM||(c.$element.prepend('<div class="'+c.opts.domUp.domClass+'"></div>'),c.upInsertDOM=!0),n(c.$domUp,0),d<=c.opts.distance?(c._offsetY=d,c.$domUp.html(c.opts.domUp.domRefresh)):d>c.opts.distance&&d<=2*c.opts.distance?(c._offsetY=c.opts.distance+.5*(d-c.opts.distance),c.$domUp.html(c.opts.domUp.domUpdate)):c._offsetY=c.opts.distance+.5*c.opts.distance+.2*(d-2*c.opts.distance),c.$domUp.css({height:c._offsetY}))}function j(b){var c=Math.abs(b._moveY);""!=b.opts.loadUpFn&&b.touchScrollTop<=0&&"down"==b.direction&&!b.isLockUp&&(n(b.$domUp,300),c>b.opts.distance?(b.$domUp.css({height:b.$domUp.children().height()}),b.$domUp.html(b.opts.domUp.domLoad),b.loading=!0,b.opts.loadUpFn(b)):b.$domUp.css({height:"0"}).on("webkitTransitionEnd mozTransitionEnd transitionend",function(){b.upInsertDOM=!1,a(this).remove()}),b._moveY=0)}function k(a){a.opts.autoLoad&&a._scrollContentHeight-a._threshold<=a._scrollWindowHeight&&m(a)}function l(a){a._scrollContentHeight=a.opts.scrollArea==b?e.height():a.$element[0].scrollHeight}function m(a){a.direction="up",a.$domDown.html(a.opts.domDown.domLoad),a.loading=!0,a.opts.loadDownFn(a)}function n(a,b){a.css({"-webkit-transition":"all "+b+"ms",transition:"all "+b+"ms"})}var f,b=window,c=document,d=a(b),e=a(c);a.fn.dropload=function(a){return new f(this,a)},f=function(a,b){var c=this;c.$element=a,c.upInsertDOM=!1,c.loading=!1,c.isLockUp=!1,c.isLockDown=!1,c.isData=!0,c._scrollTop=0,c._threshold=0,c.init(b)},f.prototype.init=function(f){var l=this;l.opts=a.extend(!0,{},{scrollArea:l.$element,domUp:{domClass:"dropload-up",domRefresh:'<div class="dropload-refresh">↓下拉刷新</div>',domUpdate:'<div class="dropload-update">↑釋放更新</div>',domLoad:'<div class="dropload-load"><span class="loading"></span>加載中...</div>'},domDown:{domClass:"dropload-down",domRefresh:'<div class="dropload-refresh">↑上拉加載更多</div>',domLoad:'<div class="dropload-load"><span class="loading"></span>加載中...</div>',domNoData:'<div class="dropload-noData">暫無數據</div>'},autoLoad:!0,distance:50,threshold:"",loadUpFn:"",loadDownFn:""},f),""!=l.opts.loadDownFn&&(l.$element.append('<div class="'+l.opts.domDown.domClass+'">'+l.opts.domDown.domRefresh+"</div>"),l.$domDown=a("."+l.opts.domDown.domClass)),l._threshold=l.$domDown&&""===l.opts.threshold?Math.floor(1*l.$domDown.height()/3):l.opts.threshold,l.opts.scrollArea==b?(l.$scrollArea=d,l._scrollContentHeight=e.height(),l._scrollWindowHeight=c.documentElement.clientHeight):(l.$scrollArea=l.opts.scrollArea,l._scrollContentHeight=l.$element[0].scrollHeight,l._scrollWindowHeight=l.$element.height()),k(l),d.on("resize",function(){l._scrollWindowHeight=l.opts.scrollArea==b?b.innerHeight:l.$element.height()}),l.$element.on("touchstart",function(a){l.loading||(g(a),h(a,l))}),l.$element.on("touchmove",function(a){l.loading||(g(a,l),i(a,l))}),l.$element.on("touchend",function(){l.loading||j(l)}),l.$scrollArea.on("scroll",function(){l._scrollTop=l.$scrollArea.scrollTop(),""!=l.opts.loadDownFn&&!l.loading&&!l.isLockDown&&l._scrollContentHeight-l._threshold<=l._scrollWindowHeight+l._scrollTop&&m(l)})},f.prototype.lock=function(a){var b=this;void 0===a?"up"==b.direction?b.isLockDown=!0:"down"==b.direction?b.isLockUp=!0:(b.isLockUp=!0,b.isLockDown=!0):"up"==a?b.isLockUp=!0:"down"==a&&(b.isLockDown=!0,b.direction="up")},f.prototype.unlock=function(){var a=this;a.isLockUp=!1,a.isLockDown=!1,a.direction="up"},f.prototype.noData=function(a){var b=this;void 0===a||1==a?b.isData=!1:0==a&&(b.isData=!0)},f.prototype.resetload=function(){var b=this;"down"==b.direction&&b.upInsertDOM?b.$domUp.css({height:"0"}).on("webkitTransitionEnd mozTransitionEnd transitionend",function(){b.loading=!1,b.upInsertDOM=!1,a(this).remove(),l(b)}):"up"==b.direction&&(b.loading=!1,b.isData?(b.$domDown.html(b.opts.domDown.domRefresh),l(b),k(b)):b.$domDown.html(b.opts.domDown.domNoData))}}(window.Zepto||window.jQuery);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。