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}

     這是我的頁面。如果有需要自己拿去改改吧，也不是很難