UI组件——用jQuery做一个上拉刷新

Posted 2020-08-28 liaofy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了UI组件——用jQuery做一个上拉刷新相关的知识，希望对你有一定的参考价值。

技术要点：

1、jQuery的插件写法

2、上拉刷新步骤分解

3、css样式

jQuery的插件写法：

$.fn.pluginName = function() {
    return this.each(function () {
        fn();
    })
};

上拉刷新步骤分解：

上拉刷新可以分解成三个部分：一是开始（start），记录当前鼠标的位置；二是移动（move），根据下拉的位移响应不同的视图；三是结束（end），刷新页面。

;!function ($) {
    "use strict";
    var PTR = function (ele) {
        this.container = $(ele);
        this.container.addClass(\'pull-to-refresh\');
        this.distance = 60; // 设置参考的下拉位移
        this.attachEvent();
    };
    // 判断是否有touch事件发生
    var isTouch = (function () {
        var isSupportTouch = !!\'ontouchstart\' in document || window.documentTouch;
        return isSupportTouch;
    })();
    var touchEvents = {
        start: isTouch ? \'touchstart\': \'mousedown\',
        move: isTouch ? \'touchmove\':\'mousemove\',
        end: isTouch ? \'touchend\': \'mouseup\'
    };
    // 获取事件发生时相对于文档的距离（含滚动距离）
    function getTouchPosition(e) {
         var e = e.orinalEvent || e;
         console.log(e)
         if(e.type === \'touchstart\' || e.type === \'touchmove\' || e.type === \'touchend\') {
             return {
                 x: e.targetTouches[0].pageX,
                 y: e.targetTouches[0].pageY
             }
         }else {
             return {
                 x: e.pageX,
                 y: e.pageY
             }
         }
    };
    PTR.prototype.touchStart = function (e) {
        var p = getTouchPosition(e);
        this.start = p;
        this.diffX = this.diffY = 0;
    };
    PTR.prototype.touchMove = function (e) {
        if(this.container.hasClass(\'refreshing\')) return;
        if(!this.start) return false;
        var p = getTouchPosition(e);
        this.diffX = p.x - this.start.x;
        this.diffY = p.y - this.start.y;
        if(this.diffY < 0) return;
        this.container.addClass(\'touching\');
        e.preventDefault();
        e.stopPropagation();
        // 设置container的位移小于页面滚动的距离，给人一种用力下拉的错觉，提升用户体验
        this.diffY = Math.pow(this.diffY, .8);
        this.container.css(\'transform\', \'translate3d(0,\'+ this.diffY +\'px, 0)\');
        if(this.diffY < this.distance) {
            this.container.removeClass(\'pull-up\').addClass(\'pull-down\')
        }else {
            this.container.removeClass(\'pull-down\').addClass(\'pull-up\')
        }
    };
    PTR.prototype.touchEnd = function (e) {
        var _this = this;
        this.start = false;
        this.container.removeClass(\'pull-down\');
        this.container.removeClass(\'pull-up\');
        this.container.removeClass(\'touching\');
        this.container.css(\'transform\',\'\');
        if(this.diffY >= this.distance) {
            this.container.addClass(\'refreshing\');
            this.container.trigger(\'pull-to-refresh\')
        }
    };
    // 事件处理程序，通过$.proxy(fn, content)绑定执行函数的上下文。
    PTR.prototype.attachEvent = function () {
        var ele = this.container;
        ele.on(touchEvents.start, $.proxy(this.touchStart, this));
        ele.on(touchEvents.move, $.proxy(this.touchMove, this));
        ele.on(touchEvents.end, $.proxy(this.touchEnd, this));
    };
    // 实例化构造函数
    var pullToRefresh = function (ele) {
        new PTR(ele)
    };
    var pullToRefreshDone = function (ele) {
        $(ele).removeClass(\'refreshing\');
    };
    // jQuery 插件编写的一般模式
    $.fn.pullToRefresh = function () {
        // return 是插件可链式调用
        // this 在这里是一个jQuery对象，相当于$(ele)。因为在即时执行函数作用域中，没必要用“$(this)”的方式来把this包裹到一个jQuery对象中，因为this本身已经是被包装好的jQuery对象。
        // this.each()使插件代码为多元素集合中的每个元素单独起作用
        return this.each(function () {
            pullToRefresh(this);
        })
    };
    $.fn.pullToRefreshDone = function () {
        return this.each(function () {
            pullToRefreshDone(this);
        })
    }

}(window.jQuery);

View Code

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="pull-to-refresh.css">
    <style>
        p {
            margin-top: 0;
        }
    </style>
</head>
<body>
<div class="pull-to-refresh_layer">
    <div class="pull-to-refresh-arrow">↓</div>
    <div class="pull-to-refresh-preloader"></div>
    <div class="down">下拉刷新</div>
    <div class="up">释放刷新</div>
    <div class="refresh">正在刷新</div>
</div>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
        beatae dignissimos eaque est ex fugi
        at incidunt inventore natus nemo nostru
        m omnis quos repellat ut voluptas!
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
        beatae dignissimos eaque est ex fugi
        at incidunt inventore natus nemo nostru
        m omnis quos repellat ut voluptas!
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
        beatae dignissimos eaque est ex fugi
        at incidunt inventore natus nemo nostru
        m omnis quos repellat ut voluptas!
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
        beatae dignissimos eaque est ex fugi
        at incidunt inventore natus nemo nostru
        m omnis quos repellat ut voluptas!
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
        beatae dignissimos eaque est ex fugi
        at incidunt inventore natus nemo nostru
        m omnis quos repellat ut voluptas!
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
        beatae dignissimos eaque est ex fugi
        at incidunt inventore natus nemo nostru
        m omnis quos repellat ut voluptas!
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
        beatae dignissimos eaque est ex fugi
        at incidunt inventore natus nemo nostru
        m omnis quos repellat ut voluptas!
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
        beatae dignissimos eaque est ex fugi
        at incidunt inventore natus nemo nostru
        m omnis quos repellat ut voluptas!
    </p>

</div>
<script src="../jquery-1.8.3.min.js"></script>
<script src="pull-to-refresh.js"></script>
<script>
    $(function () {
        $(document.body).pullToRefresh().on(\'pull-to-refresh\', function () {
            setTimeout(function () {
                $(document.body).pullToRefreshDone();
            }, 2000)
        });
    })
</script>
</body>
</html>

View Code

CSS代码如下：

.pull-to-refresh {
    margin-top: -50px;
    transition: transform .4s;
}
.pull-to-refresh .pull-to-refresh-preloader,
.pull-to-refresh .up,
.pull-to-refresh .refresh {
    display: none;
}
.pull-to-refresh.refreshing {
    transform: translate3d(0,50px,0);
}

.refreshing .pull-to-refresh-arrow,
.refreshing .down,
.refreshing .up {
    display: none;
}
.refreshing .refresh,
.refreshing .pull-to-refresh-preloader {
    display: inline-block;
}
.pull-to-refresh_layer {
    height: 30px;
    line-height: 30px;
    padding-bottom: 10px;
}
.pull-down .pull-to-refresh_layer .up,
.pull-down .pull-to-refresh_layer .refresh {
    display: none;
}
.pull-down .pull-to-refresh_layer .down{
    display: inline-block;
}
.pull-up .pull-to-refresh_layer .up{
    display: inline-block;
}

.pull-up .pull-to-refresh_layer .down,
.pull-up .pull-to-refresh_layer .refresh {
    display: none;
}

.pull-up .pull-to-refresh-arrow {
    transform: rotate(180deg) translate3d(0, 0, 0);
}
.pull-to-refresh-arrow {
    display: inline-block;
    z-index: 10;
    margin-right: 4px;
    transition-duration: 300ms;
    transform: rotate(0deg) translate3d(0, 0, 0);
}

.pull-to-refresh_layer {
    display: inline-block;
}
.pull-to-refresh-preloader {
    display: inline-block;
}
.pull-down {

}
.pull-up {

}
.down {
    display: inline-block;
}
.up {
    display: inline-block;
}
.refresh {
    display: inline-block;
}

View Code

以上是关于UI组件——用jQuery做一个上拉刷新的主要内容，如果未能解决你的问题，请参考以下文章

从 fragmentActivity 刷新片段 UI

vue2 mint-ui loadmore(下拉刷新，上拉更多)

mint-ui下拉加载min和上拉刷新（demo实例）

弹性ScrollView,和下啦刷新的效果相似实现下拉弹回和上拉弹回

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

使用 jQuery UI 可排序插件添加项目后刷新列表