移动端滚动插件 minirefresh

785次阅读

共计 2091 个字符，预计需要花费 6 分钟才能阅读完成。

插件地址 https://github.com/minirefresh/minirefresh

使用代码

<!DOCTYPE html>
<html>
<head>
    {include file="common/head" /}
    <style>
        .minirefresh-wrap{top:45px;}
    </style>
</head>
<body>
{include file="common/header" /}
<div class="containar">
    <div id="minirefresh" class="minirefresh-wrap">
        <div class="minirefresh-scroll">

            <div class="weui-panel weui-panel_access notice-box">
                <div class="weui-panel__bd" id="gg_list">
                </div>
            </div>

        </div>
    </div>
</div>
{include file="common/footer_js" /}
{literal}
<script id='tpl_gonggao' type="text/x-dot-template">
    {{~it:g:index}}
    <a href="{{=g.url}}" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title">{{=g.title}}</h4>
            <ul class="weui-media-box__info">
                <li class="weui-media-box__info__meta">来源部门：{{=g.bm}}</li>
                <li class="weui-media-box__info__meta time">{{=g.shijian}}</li>
            </ul>
        </div>
    </a>
    {{~}}
</script>
{/literal}
<script>
    var pageIndex = 0;
    var pageLoad = false;
    function getPager(downOrUp) {
        if (downOrUp == 'down') {
            pageIndex = 1;// 下拉刷新页码设置
        } else {
            pageIndex++;// 上拉加载递增页码
        }
        if(false == pageLoad){
            pageLoad = true;
            $.ajax({
                type: "GET",
                url: "{:url('index')}",
                data: {p:pageIndex},
                timeout:10000,
                success: function(json){
                    console.log(json);
                    pageLoad = false;

                    if(json['code']){
                        var evalText = doT.template($('#tpl_gonggao').text());
                        if (downOrUp == 'down') {
                            $('#gg_list').html(evalText(json['data']['list']));
                            miniRefresh.endDownLoading(true);// 结束下拉刷新
                        } else {
                            $('#gg_list').append(evalText(json['data']['list']));
                            if(json['data']['page'] == pageIndex){  // 是否已取完数据页
                                miniRefresh.endUpLoading(true);// 结束上拉加载
                            }
                            else {
                                miniRefresh.endUpLoading(false);
                            }
                        }
                    }
                    else{
                        $.toast("通知公告加载失败", "forbidden");
                    }
                }
                ,error:function(XMLHttpRequest,textStatus){
                    $.hideLoading();
                    if('timeout' == textStatus){
                        $.toptip('请求接口超时！', 10000, 'error');
                    }
                    else{
                        $.toptip('系统错误，请刷新重试或者联系管理员！', 10000, 'error');
                    }

                }
            });
        }
    }

    var miniRefresh = new MiniRefresh({
        container: '#minirefresh',
        down: {
            callback: function() {
                // 下拉事件
                console.log('down')
                getPager('down')
            }
        },
        up: {
            isAuto: true,
            callback: function() {
                // 上拉事件
                console.log('up')
                getPager('up')
            }
        }
    });
</script>
<script>
    window.addEventListener('pageshow', function(e) {
        // 通过persisted属性判断是否存在 BF Cache
        if (e.persisted) {
            location.reload();
        }
    });
</script>
</body>
</html>

正文完