jquery 下拉刷新 上拉加载

转载 2015年11月21日 16:15:48
/**
 * Created by Administrator on 2015/11/20.
 */
// 需要引入 zepto.min.js 文件
// dropload.js 文件内容
;(function($){
    'use strict';
    var $win = $(window);
    var $doc = $(document);
    $.fn.dropload = function(options){
        return new MyDropLoad(this, options);
    };
    var MyDropLoad = function(element, options){
        var me = this;
        me.$element = $(element);
        me.insertDOM = false;
        me.loading = false;
        me.isLock = false;
        me.init(options);
    };

    // 初始化
    MyDropLoad.prototype.init = function(options){
        var me = this;
        me.opts = $.extend({}, {
            scrollArea : me.$element,                                            // 滑动区域
            domUp : {                                                            // 上方DOM
                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 : {                                                          // 下方DOM
                domClass   : 'dropload-down',
                domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
                domUpdate  : '<div class="dropload-update">↓释放加载</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
            },
            distance : 50,                                                       // 拉动距离
            loadUpFn : '',                                                       // 上方function
            loadDownFn : ''                                                      // 下方function
        }, options);

        // 判断滚动区域
        if(me.opts.scrollArea == window){
            me.$scrollArea = $win;
        }else{
            me.$scrollArea = me.opts.scrollArea;
        }

        // 绑定触摸
        me.$element.on('touchstart',function(e){
            if(!me.loading && !me.isLock){
                fnTouches(e);
                fnTouchstart(e, me);
            }
        });
        me.$element.on('touchmove',function(e){
            if(!me.loading && !me.isLock){
                fnTouches(e, me);
                fnTouchmove(e, me);
            }
        });
        me.$element.on('touchend',function(){
            if(!me.loading && !me.isLock){
                fnTouchend(me);
            }
        });
    };

    // touches
    function fnTouches(e){
        if(!e.touches){
            e.touches = e.originalEvent.touches;
        }
    }

    // touchstart
    function fnTouchstart(e, me){
        me._startY = e.touches[0].pageY;
        // 判断滚动区域
        if(me.opts.scrollArea == window){
            me._meHeight = $win.height();
            me._childrenHeight = $doc.height();
        }else{
            me._meHeight = me.$element.height();
            me._childrenHeight = me.$element.children().height();
        }
        me._scrollTop = me.$scrollArea.scrollTop();
    }

    // touchmove
    function fnTouchmove(e, me){
        me._curY = e.touches[0].pageY;
        me._moveY = me._curY - me._startY;

        if(me._moveY > 0){
            me.direction = 'down';
        }else if(me._moveY < 0){
            me.direction = 'up';
        }

        var _absMoveY = Math.abs(me._moveY);

        // 加载上方
        if(me.opts.loadUpFn != '' && me._scrollTop <= 0 && me.direction == 'down'){
            e.preventDefault();
            if(!me.insertDOM){
                me.$element.prepend('<div class="'+me.opts.domUp.domClass+'"></div>');
                me.insertDOM = true;
            }

            me.$domUp = $('.'+me.opts.domUp.domClass);
            fnTransition(me.$domUp,0);

            // 下拉
            if(_absMoveY <= me.opts.distance){
                me._offsetY = _absMoveY;
                // 待解决:move时会不断清空、增加dom,有可能影响性能,下同
                me.$domUp.html('').append(me.opts.domUp.domRefresh);
                // 指定距离 < 下拉距离 < 指定距离*2
            }else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){
                me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5;
                me.$domUp.html('').append(me.opts.domUp.domUpdate);
                // 下拉距离 > 指定距离*2
            }else{
                me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2;
            }

            me.$domUp.css({'height': me._offsetY});
        }

        // 加载下方
        if(me.opts.loadDownFn != '' && me._childrenHeight <= (me._meHeight+me._scrollTop) && me.direction == 'up'){
            e.preventDefault();
            if(!me.insertDOM){
                me.$element.append('<div class="'+me.opts.domDown.domClass+'"></div>');
                me.insertDOM = true;
            }

            me.$domDown = $('.'+me.opts.domDown.domClass);
            fnTransition(me.$domDown,0);

            // 上拉
            if(_absMoveY <= me.opts.distance){
                me._offsetY = _absMoveY;
                me.$domDown.html('').append(me.opts.domDown.domRefresh);
                // 指定距离 < 上拉距离 < 指定距离*2
            }else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){
                me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5;
                me.$domDown.html('').append(me.opts.domDown.domUpdate);
                // 上拉距离 > 指定距离*2
            }else{
                me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2;
            }

            me.$domDown.css({'height': me._offsetY});
            me.$scrollArea.scrollTop(me._offsetY+me._scrollTop);
        }
    }

    // touchend
    function fnTouchend(me){
        var _absMoveY = Math.abs(me._moveY);
        if(me.insertDOM){
            if(me.direction == 'down'){
                me.$domResult = me.$domUp;
                me.domLoad = me.opts.domUp.domLoad;
            }else if(me.direction == 'up'){
                me.$domResult = me.$domDown;
                me.domLoad = me.opts.domDown.domLoad;
            }

            fnTransition(me.$domResult,300);

            if(_absMoveY > me.opts.distance){
                me.$domResult.css({'height':me.$domResult.children().height()});
                me.$domResult.html('').append(me.domLoad);
                fnCallback(me);
            }else{
                me.$domResult.css({'height':'0'}).on('webkitTransitionEnd',function(){
                    me.insertDOM = false;
                    $(this).remove();
                });
            }
            me._moveY = 0;
        }
    }

    // 回调
    function fnCallback(me){
        me.loading = true;
        if(me.opts.loadUpFn != '' && me.direction == 'down'){
            me.opts.loadUpFn(me);
        }else if(me.opts.loadDownFn != '' && me.direction == 'up'){
            me.opts.loadDownFn(me);
        }
    }

    // 锁定
    MyDropLoad.prototype.lock = function(){
        var me = this;
        me.isLock = true;
    };

    // 解锁
    MyDropLoad.prototype.unlock = function(){
        var me = this;
        me.isLock = false;
    };

    // 重置
    MyDropLoad.prototype.resetload = function(){
        var me = this;
        if(!!me.$domResult){
            me.$domResult.css({'height':'0'}).on('webkitTransitionEnd',function(){
                me.loading = false;
                me.insertDOM = false;
                $(this).remove();
            });
        }
    };

    // css过渡
    function fnTransition(dom,num){
        dom.css({
            '-webkit-transition':'all '+num+'ms',
            'transition':'all '+num+'ms'
        });
    }
})(window.Zepto || window.jQuery);


// 调用js
// 下拉加载图片
$('.good_intro').dropload({
    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>'
    },
    loadDownFn : function(me){
        if($.trim($('#details').html())==null||$.trim($('#details').html())=='') {
            var url = "../picture/" + $("#productId").val() + ".html";
            $.ajax({
                type: 'GET',
                url: url,
                success: function (data) {
                    if (null == data || data.length <= 0) {
                        me.resetload();
                        return;
                    } else {

                        // 测试效果
                        setTimeout(function () {
                            $('#details').html(data.mobileDesc);
                            me.resetload();
                        }, 1000);
                    }
                },
                error: function (xhr, type) {
                    alert('Ajax error!');
                    me.resetload();
                }
            });
        }else{
            me.resetload();
        }
    }
});

相关文章推荐

jQuery模拟原生态App上拉刷新下拉加载效果代码

以下任意均可:   1. jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用。 原文:ht...

Jquery 判断滚动条到达顶部或底部 (可用于上拉下拉加载刷新)

无标题页                 $(document).ready(function() {             $(...
  • Sbangm
  • Sbangm
  • 2015-01-15 16:32
  • 29867

dropload手机端上拉刷新

1、 使用方法 引用css和js rel="stylesheet" href="../dist/dropload.min.css"> src="../dist/dropload.min.js"...

jquery下拉刷新页面

最近在开发项目是遇到一个问题,用jquery如何实现手机里的下拉刷新的效果呢?经过一番百度,找到了一款jquery下拉刷新的插件,希望在这里跟大家分享一下。 在下载包里有源码,以下是下载的链接: ...

微信支付测试返回:access_control:not_allow或system:access_denied

比如我的测试js支付的页面是 http://10.10.x.y/test/wxpay 。首先要将“商户功能”->支付测试 下的“支付测试目录”改成  http://10.10.x.y/test/。 ...
  • Sbangm
  • Sbangm
  • 2015-01-21 09:55
  • 3876

IScroll5实现下拉刷新上拉加载更

声明:虽然本文章为原创,但是很大部分参考了博客园博主MRxia的一篇iscroll的下拉刷新的实现方式,我个人把demo简化了一下,具体原来的demo可以参考:点击打开链接 实现效果:类似网...

上拉加载,下拉刷新

html     55                             ...

页面滚动动态加载数据,页面下拉自动加载内容

$(document).ready(function(){ var range = 50; //距下边界长度/单位px var elemt = ...

网页图片延迟加载LazyLoad.js使用方法介绍和实例

延迟加载图片插件LazyLoad.js的使用方法 我们常常会见到很多网页的图片并不是一打开页面就全部加载的,而是浏览到当前的图片位置才显示出来。这是怎么实现出来的呢?其实这就是目前较...
  • for12
  • for12
  • 2015-10-13 17:24
  • 3896

使用dragloader.js插件实现上拉加载/下拉刷新..

在写代码时候有个需求是,在触屏页面,为了加快页面加载速度,案件列表每页展示5条数据; 然后点击更多,展示下一页数据; 但是为了触屏更好的体验,改为往上滑动案件列表,加载下一页数据;就是要实现上拉加...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)