一、上下拉新，下拉加载

fger 2021-08-06 原文

一、上下拉新，下拉加载

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <meta charset="utf-8" />
    <title>下拉刷新例子</title>
    <link href="http://www.itxst.com/package/minirefresh2/minirefresh.css" rel="stylesheet" />
    <script src="http://www.itxst.com/package/minirefresh2/minirefresh.js"></script>
    <script src="http://www.itxst.com/js/jquery.js"></script>
    <style>
        .list {
            width: 80%;
            margin-top: 10px;
            margin-left: auto;
            margin-right: auto;
            background-color: #f1f1f1;
            border: solid 1px #ddd;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div id="mrefresh" class="minirefresh-wrap">
        <div class="minirefresh-scroll">


            <!-- 这里放你要被下拉的区域 -->
            <div class="list">
                <ul>
                    <li>网站www.itxst.com</li>
                    <li>网站www.github.com</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站www.itxst.com</li>
                    <li>网站www.github.com</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站www.itxst.com</li>
                    <li>网站www.github.com</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                    <li>网站内容11111</li>
                </ul>
            </div>


        </div>
    </div>
    <script>
        var mRefresh = new MiniRefresh({
        container: \'#mrefresh\', //这里是插件的容器ID
        down: {
                isAuto: true, //打开页后自动执行callback里的方法，如getData
                successAnim: { isEnable: true },//isEnable true可以看到下拉动画 false 没有动画
                offset:75,//触发下拉的阈值，当下拉距离大于这个阈值后，在松开时会触发下拉刷新，重要比如你自己的网页顶部有给固定的toolbar则需要用到这个配置
                dampRateBegin:1, //阻尼系数，下拉小于offset时的阻尼系数，值越接近0,高度变化越小,表现为越往下越难拉，默认值就行
                dampRate:0.3,
                callback: function () {
                    // 下拉后的回调事件  
                    getData();
                    mRefresh.endDownLoading();
                }
                ,
                onCalcel: function () {
                    //下拉到一半，放弃刷新执行的事件
                    calcelMsg();
                }
        },    
        up: {
            isAuto: false,
            loadFull:{
                 isEnable:true,
                 delay:1000
                },
                callback: function () {
                    
                    // 向上拉后的回调事件
                    getData();
                    
                }
            }
        });


        var pos = 0;
        function getData()
        {
            for (var i = pos; i < pos+ 50; i++)
                {
                $(".list ul").append("<li>新数据" + i + "</li>");

            }
            //下拉没有内容 结束动画
            pos = pos + 50;
              if (pos > 100)
                    mRefresh.endUpLoading(true);//数据全部加载完了，再上拉也不会触发up回调事件
                    else
                    mRefresh.endUpLoading(false); //后台还有数据可加载，用户再次向上滑动还会触发事件
        }


        function calcelMsg()
        {
            $(".list ul li").remove();
            $(".list ul").append("<li>你放弃了刷新</li>");
        }
    </script>
</body>
</html>