下拉刷新数据,插件(dropload)

本文介绍了如何利用dropload.js插件实现在网页中实现下拉刷新和上拉加载更多的功能。通过添加HTML结构,设置JavaScript事件监听,以及调用相关API来处理数据加载和页面滚动交互。示例代码包括了页面元素的定义、事件绑定和数据加载函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需要引用dropload.min.js

html:

<div class="page-content">
    <div class="page__bd" id="listwrap">
        <div class="inner" id="Tolist">

            存放数据,随便编辑
        </div>
        <div class="weui-loadmore dropDown">
            <span class="weui-loadmore__tips">↑上拉加载更多</span>
        </div>
        <div class="weui-loadmore loading">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </div>
</div>

js:

var statics = 0;
        var pages = 1;
        var sizes = 4;
        var loading = false;  //状态标记
        $(function () {
            loadlist();
        })
        var windowHeight = $(window).height(),$body = $("body");
        $body.css("height", windowHeight);
        $("body").bind({
            touchstart:function(e){
                /*e.preventDefault();*/
                e.stopPropagation();
                startX = e.originalEvent.changedTouches[0].pageX,
                startY = e.originalEvent.changedTouches[0].pageY;    
            },
            touchmove:function(e){
                $(".dropload-down").remove();
                // console.log("touch:",page)
                /*e.preventDefault();*/
                e.stopPropagation();
                moveEndX = e.originalEvent.changedTouches[0].pageX,
                moveEndY = e.originalEvent.changedTouches[0].pageY,
                X = moveEndX - startX,
                Y = moveEndY - startY;
                if( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
                    makeFun();
                }
            }
        });
        $("#listwrap").infinite().on("infinite", function () {
            makeFun();
        });
        // =======加载数据loadlist();
        function loadlist(){
            var html = "";
            /*console.log("pages:",pages);*/
            $.ajax({
                url:url,
                data:{
                    "page":pages
                },
                type:'post',
                async:true,
                dataType:'html',
                success:function(data){
                    var data = $.parseJSON(data);
                    // console.log("请求成功:", data);
                    /*if(data.status==1){
                        var re = data.result;

                        $("#Tolist").append(re);
                        $(".dropDown").show();
                    }else{
                        html += "<div class=\"weui-cells__title\" >——我也是有底线的——</div>";
                        $("#Tolist").append(html);
                        loading = true;
                        $(".dropDown").hide();
                    }*/
                    var f = data.info;
                    if(f.length>0){
                        html = '<div class="likeshop"><ul>';
                        for(var i=0;i<f.length;i++){
                            console.log(f[i]);
                            html += '<li><a href="'+f[i].url+'"></a>'+
                                    '<div class="similer-product">'+
                                    '<div class="zjj close"><img src="'+f[i].img+'"></div>'+
                                    '<span class="similar-product-text"></span>'+
                                    '<span class="similar-product-price">'+
                                    '¥<span class="big-price">'+f[i].unit_price+'元</span>'+
                                    '<span class="fr sg_g_time last_g_time" id="jstimerBox'+f[i].audio_id+'"></span></span>'+
                                    '</div></li>';
                        }
                        html += '</ul></div>';
                        console.log(html);
                        $("#Tolist").append(html);
                        $(".dropDown").show();
                    }else{
                        html += "<div class=\"weui-cells__title\" >——我也是有底线的——</div>";
                        $("#Tolist").append(html);
                        loading = true;
                        $(".dropDown").hide();
                    }
                    $(".loading").hide();
                    
                },
                error:function(msg){
                    console.log("请求失败",msg);
                    $(".loading").hide();
                    $(".dropDown").hide();
                    html += "<div class=\"weui-cells__title\" >——我也是有底线的——</div>";
                    $("#Tolist").html(html);
                }
            })
        }
        function makeFun(){
            if (loading) return;
            loading = true;
            pages++; //页数
            $('.loading').show();
            setTimeout(function () {
                loadlist();
                loading = false;
            }, 2500);   //模拟延迟
            $(".dropDown").hide();
        }

dropload.min.js:

!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.loadDownFn&&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(){clearTimeout(l.timer),l.timer=setTimeout(function(){l._scrollWindowHeight=l.opts.scrollArea==b?b.innerHeight:l.$element.height(),k(l)},150)}),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);

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值