zoukankan      html  css  js  c++  java
  • 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}

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

  • 相关阅读:
    仓鼠找sugar(LCA)
    bzoj4481非诚勿扰(期望dp)
    NOIP2011Mayan游戏(模拟)
    [国家集训队]旅游
    NOIP2012疫情控制(二分答案+树上贪心)
    NOIP2017题解
    [SCOI2010]幸运数字(容斥+爆搜)
    [JSOI2008]Blue Mary的战役地图(二分+哈希)
    [湖南集训]谈笑风生(主席树)
    NOIP2016题解
  • 原文地址:https://www.cnblogs.com/dayin1/p/13280056.html
Copyright © 2011-2022 走看看