jQuery weui实现下拉刷新事件

网上搜了好多，但是千篇一律，而且代码全粘过来也没有实现效果，也不知道那些人是怎么做出来的，咱也不敢给人胡乱评论，还是自己开个帖子记录下来吧。

首先引进jQuery weui的各种文件，巴拉巴拉，

它的原理是将下拉显示的文字隐藏到上面去，有个margin-top=-50px;,如果你的头部没有这么大的高度就自己改一下，顺便改一下头部设置成position：relative；然后再引用它的成品代码，废话不多说了直接上代码把

{extend name="/public/baseyjs"}
{block name="title"}
<title>库存盘点</title>
{/block}
{block name="style"}
<style>
    body {
        background: #f5f5f5;
    }
    .main {
        overflow-y: scroll;
        overflow-x: hidden;
    }
    * {
        box-sizing: border-box;
    }

    .py {
        color: #99CC00;
    }

    .pk {
        color: #CC3333;
    }

    .title {
        color: #ff8500;
    }

    .status {
        color: #FF0033;
    }

    .two {
        color: #999;
        font-size: 14px;
    }

    .item {
        width: 98%;
        background: #fff;
        padding: 5px;
        margin: 5px auto;
        border-radius: 5px;
    }
    .weui-pull-to-refresh {
        margin-top:-35px;
    }
    .header {
        position: relative;
        z-index:500;
    }
</style>
{/block}

{block name="main"}
{include file="/public/header2" title="库存盘点"}
<div class="main weui-pull-to-refresh">
    <div class="weui-pull-to-refresh__layer">
        <div class='weui-pull-to-refresh__arrow'></div>
        <div class='weui-pull-to-refresh__preloader'></div>
        <div class="down">下拉刷新</div>
        <div class="up">释放刷新</div>
        <div class="refresh">正在刷新</div>
    </div>
    <div class="list"></div>
</div>
{/block}

{block name="js"}
<script>
    var n = 1,
        page = 1,
        lastpage = 1,
        loading = false
    $(function () {
        getList(page)
        $(".main").infinite(20).on("infinite", function () {
            if (loading) return;
            page = page + 1
            if(page > lastpage){
                $.toast('没有更多了','text')
                return
            }
            loading = true;
            getList(page)
        })
        $(".main").pullToRefresh(function () {
            page = 1
            n = 1
            getList(page)
        });
        $(".main").on("pull-to-refresh", function() {
            //do something 这里还没细研究
        });

        let height = document.documentElement.clientHeight
        let headerHeight = $(".header").height()
        $(".main").height(height - headerHeight)
    })
    function getList(page) {
        $.showLoading('加载中')
        $.ajax({
            url: '/weixin/car/pandianlist',
            data: {page},
            type: 'get',
            success: (res) => {
                lastpage = res.last_page
                if (page == 1) {
                    $(".list").empty()
                }
                var txt = ''
                for (let v of res.data) {
                    txt += `<div class="item">
    <div class="one title">[${n}]单号:${v.dm}( <span class="status">${v.wcbz == 1 ? '已完成' : '未完成'}</span> )</div>
    <div class="two">库存托盘数:${v.SL}&nbsp;&nbsp;盘盈:<span class="py">${v.pysl}</span>&nbsp;&nbsp;盘亏:<span class="pk">${v.pksl}</span></div>
    <div class="three">日期:${v.rq}</div>
</div>`
                    n++
                }
                $(".list").append(txt)
                loading = false
                $.hideLoading()
                $(".main").pullToRefreshDone();

            }
        })
    }
</script>
{/block}

     这是我的页面。如果有需要自己拿去改改吧，也不是很难