简易h5下拉刷新插件

前言：第一次写H5页面由于页面中的列表数据需要做分页，搜索了许多相关的下拉刷新插件使用起来都比较复杂，索性自己写了一个较为简单的分页加载相关的插件；
（ps:由于使用过程中考虑的局限性可能会存在一些问题，欢迎大家使用并提出问题，空闲时间我会优化问题）

1.使用pulltorefresh.js

/**
 * Created by yunzao on 2017/12/27.
 */
(function (window) {
    var u = {};
    var slideView = null;
    var moveMaxHeight = 50;//移动多少距离触发
    var tempHeight = 0;
    var scrollTop = 0;//滚动条距离顶部的位置
    var touchStartY = 0;
    var touchMoveY = 0;
    var touchEndY = 0;
    var addHeader = false;//头部是否已添加了
    var addFooter = false;//底部是否已添加了
    var loadMoreSuc = true;//默认加载更多成功
    var loadRefreshSuc = true;//默认下拉刷新加载成功
    var isEmpty = false;//默认是否为空数据页面
    var isNoMore = false;//是否没有更多了
    var emptyMsg = '暂无数据~';//默认的空显示文字

    var loadingHtml = '<img class="pull_loading" src="static/images/loading.png">';

    var refreshHeadHtml =
        "<li id='pullHeader' style='height: " + tempHeight + "px;" +
        "max-height:.8rem;display:flex;align-items: center;justify-content: center;border: none;'>" +
        "<div id='pullHeader_tip' style='margin-left: 10px;'>下拉立即刷新</div>" +
        "</li>";

    var loadMoreHtml =
        "<div id='pullFooter' style='height:.8rem;display:flex;"
        + "align-items: center;justify-content: center;border: none;'>" +
        loadingHtml +
        "<div id='pullHeader_tip' style='margin-left: 10px;'>正在加载...</div>" +
        "</div>";

    var emptyHtml =
        "<div class='emptyView' style='height: 100%;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;border: none;'>" +
        "<img class='emptyImg' src='' style='display: none;width: 3.2rem;height: 2.4rem;'>" +
        "<div class='emptyDiv' style='margin-top: .32rem;margin-left: .6rem;margin-right: .6rem; text-align: center;'>暂无数据~</div>" +
        "</div>";

    u.slide = function (slide) {
        slideView = slide;
        slide.viewObj.on('touchstart', function (e) {
            var _touch = e.originalEvent.targetTouches[0];
            var _y = _touch.pageY;
            touchStartY = _y;

        });

        slide.viewObj.on('touchmove', function (e) {
            var _touch = e.originalEvent.targetTouches[0];
            var _y = _touch.pageY;
            touchMoveY = _y;
            var temp = touchMoveY - touchStartY;
            scrollTop = slide.viewObj.scrollTop();
            // console.log("移动中：" + scrollTop);
            if (scrollTop == 0 && (touchMoveY - touchStartY) > 10 && !isEmpty) {
                if (!addHeader) {
                    addHeader = true;
                    slide.viewObj.children('ul').before(refreshHeadHtml);
                } else {
                    $("#pullHeader").height(temp);
                    if ((touchMoveY - touchStartY) > moveMaxHeight) {
                        $("#pullHeader_tip").text('松手即可刷新');
                    } else if ((touchMoveY - touchStartY) < (moveMaxHeight - 1)) {
                        $("#pullHeader_tip").text('下拉立即刷新');
                    }
                }
            }
        });

        slide.viewObj.on('touchend', function (e) {
            var _touch = e.originalEvent.changedTouches[0];
            var _y = _touch.pageY;
            touchEndY = _y;
            // console.log(touchStartY + "/" + touchEndY)
            //下拉刷新
            if (scrollTop == 0 && !isEmpty) {
                //如果用户下拉出现了正在刷新 然后又往上推 就不执行刷新
                if (touchEndY > touchStartY) {
                    if ((touchEndY - touchStartY) > moveMaxHeight) {
                        if (loadRefreshSuc) {
                            isNoMore = false;
                            $("#pullHeader_tip").text('正在刷新中...');
                            $("#pullHeader_tip").before(loadingHtml);
                            //刷新的时候如果底部有 就需要删除并重置
                            if ($("#pullFooter") != null || $("#pullFooter") != undefined) {
                                $("#pullFooter").remove();
                                addFooter = false;
                                loadMoreSuc = true;
                            }
                            //使用双回调 这里回调给页面开始执行加载更多 页面加载完毕回调到这里
                            slide.refresh(function () {
                                //回调到这里 刷新完毕
                                $("#pullHeader").remove();
                                addHeader = false;
                                loadRefreshSuc = true;
                                // slide.viewObj.removeChild();
                            });
                            loadRefreshSuc = false;
                        }
                    } else {
                        $("#pullHeader").remove();
                        addHeader = false;
                    }
                } else {
                    $("#pullHeader").remove();
                    addHeader = false;
                }
            } else if (scrollTop >= 0) {
                $("#pullHeader").remove();
                addHeader = false;
            }
        });

        //上拉加载
        slide.viewObj.scroll(function () {
            if (!isNoMore) {
                if (!isEmpty) {
                    if (loadMoreSuc) {
                        var scrollTop = $(this).scrollTop();//滚动条的高度，即滚动条的当前位置到div顶部的距离
                        var scrollHeight = $(this)[0].scrollHeight;//滚动的高度
                        var wiewHeight = $(this).height();//div可视区域的高度
                        // console.log(scrollTop + "/" + wiewHeight + "/" + scrollHeight);
                        if (scrollTop + wiewHeight == scrollHeight) {
                            if (!addFooter) {
                                slide.viewObj.children('ul').children('#pullFooter').remove();
                                slide.viewObj.children('ul').append(loadMoreHtml);
                                addFooter = true;
                                loadMoreSuc = false;
                            }
                            //使用双回调 这里回调给页面开始执行加载更多 页面加载完毕回调到这里
                            slide.loadMore(function (isEndLoadMore) {
                                //回调结果为true表示没有更多了 并执行回调完毕
                                if (!isEndLoadMore) {
                                    $("#pullFooter").remove();
                                    addFooter = false;
                                    setTimeout(function () {
                                        loadMoreSuc = true;
                                    }, 1000)
                                } else {
                                    $("#pullFooter").empty();
                                    $("#pullFooter").text('没有更多了~');
                                }
                            });
                        }
                    }
                }
            }
        });
    }

    /**
     * 设置空
     * @param sView         父view
     * @param emptyTxt      空显示文字 默认显示
     * @param emptyImgSrc   空显示图片 默认不显示
     */
    u.slide.empty = function (sView, emptyTxt, emptyImgSrc) {
        if (sView != null) {
            slideView = sView;
        }

        //先将li全部隐藏掉
        slideView.viewObj.children('ul').children('li').hide();
        //如果空显示存在就不在往ul中添加 而是直接更新文字和图片
        if (!$('div').hasClass('emptyView')) {
            slideView.viewObj.children('ul').append(emptyHtml);
        }

        //更新文字和图片
        if (emptyTxt != null && emptyTxt != '') {
            $('.emptyDiv').empty().append(emptyTxt);
        }

        if (emptyImgSrc != null && emptyImgSrc != '') {
            $('.emptyImg').show();
            $('.emptyImg').attr('src', emptyImgSrc);

        }
        
        isEmpty = true;
    }

    //设置不为空的时候
    u.slide.noEmpty = function () {
        $('.emptyView').remove();
        slideView.viewObj.children('ul').children('li').show();
    }

    //设置没有更多数据了
    u.slide.noMore = function (sView) {
        isNoMore = true;
        if (sView != null) {
            slideView = sView;
        }
        slideView.viewObj.children('ul').append(loadMoreHtml);
        $("#pullFooter").empty();
        $("#pullFooter").text('没有更多了~');
    }

    /*end*/
    window.$pulltorefresh = u;
})(window);

2.使用pulltorefresh.css

/*滑动内容框*/
.slide_content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

/*下拉刷新loading的样式*/
.loadEffect {
    width: 20px;
    height: 20px;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;
}

.pull_loading {
    width: 18px;
    height: 18px;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(359deg)
    }
}

@-o-keyframes rotate {
    from {
        -o-transform: rotate(0deg)
    }
    to {
        -o-transform: rotate(359deg)
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}

3.在需要使用的html页面中导入相应的js与css
例：

<!DOCTYPE html>
<html>

<head>
    <title>交易明细</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <link rel="stylesheet" href="static/css/common.css"/>
    <link rel="stylesheet" href="static/css/style.css"/>
    <link rel="stylesheet" href="static/css/pullToRefresh.css"/>
</head>

<body>
<div class="wrapper white-bg" id="pageView">
    <section class="container">
        <div class="slide_content" id="slideView">
            <ul class="tranList">
                <li v-for="item in datas" class="display_column center_h">
                    <div class="display_row smallText text-black">
                        <div class="flex_1 align_left">{{item.name}}</div>
                        <div class="flex_1 align_right">￥{{item.pay_money}}</div>
                    </div>
                    <div class="display_row x_smallText" style="margin-top: 0.16rem;">
                        <div class="flex_1 align_left">{{item.pay_time}}</div>
                        <div class="flex_1 align_right">{{item.qrcode}}</div>
                    </div>
                </li>
            </ul>
        </div>
    </section>
</div>
</body>
<script type="text/javascript" src="static/js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="static/js/rem.js"></script>
<script type="text/javascript" src="static/js/main.js"></script>
<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript" src="static/js/base.js"></script>
<script type="text/javascript" src="static/js/pullToRefresh.js"></script>
</body>
<script type="text/javascript">
    $(function () {
        var appVue = new Vue({
            el: '#pageView',
            data: {
                datas: [
                    {
                        id: 10001,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.00',
                        qrcode: '1000000001'
                    },
                    {
                        id: 10002,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.20',
                        qrcode: '1000000002'
                    },{
                        id: 10002,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.20',
                        qrcode: '1000000002'
                    },{
                        id: 10002,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.20',
                        qrcode: '1000000002'
                    },{
                        id: 10002,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.20',
                        qrcode: '1000000002'
                    },{
                        id: 10002,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.20',
                        qrcode: '1000000002'
                    },{
                        id: 10002,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.20',
                        qrcode: '1000000002'
                    },{
                        id: 10002,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.20',
                        qrcode: '1000000002'
                    },{
                        id: 10002,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.20',
                        qrcode: '1000000002'
                    },{
                        id: 10002,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.20',
                        qrcode: '1000000002'
                    },{
                        id: 10002,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.20',
                        qrcode: '1000000002'
                    },{
                        id: 10002,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.20',
                        qrcode: '1000000002'
                    },{
                        id: 10002,
                        name: '阿斌家-测试',
                        pay_time: '2017.12.12',
                        pay_money: '1.20',
                        qrcode: '1000000002'
                    },
                ],
            },
            mounted() {
                $pulltorefresh.slide({
                    viewObj: $('#slideView'),
                    refresh: function (endRefresh) {
                        console.log("刷新")
                        setTimeout(function () {
                            endRefresh();

                            $pulltorefresh.slide.noMore()
                        }, 2000)
                    },
                    loadMore: function (endLoadMore) {
                        console.log("加载")
                        setTimeout(function () {
                            endLoadMore(true);
                        }, 2000)
                    }
                })

                $pulltorefresh.slide.noMore();
//                $pulltorefresh.slide.empty();
                 $pulltorefresh.slide.empty(null, '啊偶，没有符合的结果，换个词试试', 'static/images/icon_search_empty.png')
            },
            watch: {},
            methods: {}
        })
    });
</script>
</html>