pullToRefresh.js 浏览器上拉刷新加载插件-BFW插件库

pullToRefresh.js 浏览器上拉刷新加载插件
第一步引入bfwone ，加载依赖项iscroll
第二步执行插件
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=iscroll&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["pullToRefresh", "pullToRefresh"], function() {
                refresher.init({
                    id: "wrapper",
                    pullDownAction: Refresh,
                    pullUpAction: Load
                });
            });
        });

        function Refresh() {
            setTimeout(function () {
                // <-- Simulate network congestion, remove setTimeout from production!
                var el, li, i;
                el = document.querySelector("#wrapper ul");
                //这里写你的刷新代码
                document.getElementById("wrapper").querySelector(".pullDownIcon").style.display = "none";
                document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML = "<img src='http://editor.bfw.wiki/bfwrepo/image/ok.png'/>刷新成功";
                setTimeout(function () {
                    wrapper.refresh();
                    document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML = "";
                }, 1000); //模拟qq下拉刷新显示成功效果
                /****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
            }, 1000);
        }
        function Load() {
            setTimeout(function () {
                // <-- Simulate network congestion, remove setTimeout from production!
                var el, li, i;
                el = document.querySelector("#wrapper ul");
                for (i = 0; i < 2; i++) {
                    li = document.createElement('li');
                    li.innerHTML = "<img src='http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg'><div class='game-info'><h1>华仔超神战记</h1><p>9万次下载     89.18M</p><p>秒杀虚拟摇杆，砸烂手机键盘</p></div><button>下载</button>"
                    el.appendChild(li, el.childNodes[0]);
                }
                wrapper.refresh(); /****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
            }, 2000);
        }

    </script>
    <style type="text/css" media="all">
        body, html {
            padding: 0;
            margin: 0;
            height: 100%;
            font-family: Arial, Microsoft YaHei;
            color: #111;
        }
        .scroller li {
            height: 60px;
            border-bottom: 1px solid #eee;
            background-color: #fff;
            font-size: 14px;

        }
        .pullDownLabel img {
            width: 13px;
            height: 13px;
            margin-top: -1px;
            vertical-align: -2px;
            margin-right: 5px;
        }
        #wrapper ul li img {
            width: 60px;
            float: left;
            margin-left: 10px;
        }
        .game-info {
            text-align: left;
            float: left;
            margin-left: 10px;
            width: 210px;
            overflow: hidden;
            height: 60px;
        }
        .game-info h1 {
            font-size: 16px;
            margin-bottom: 8px;
        }
        .game-info p:nth-child(2) {
            font-size: 12px;
            color: #B6B6B6;
        }
        .game-info p:nth-child(3) {
            font-size: 12px;
            color: #9D9D9D;
        }
        #wrapper ul li button {
            position: absolute;
            right: 20px;
            margin-top: 10px;
            background-color: #F8CD0C;
            border: 0;
            color: #fff;
            font-family: Microsoft YaHei;
            padding: 5px 14px;
            border-radius: 3px;
        }
    </style>
</head>
<body>

    <div id="wrapper">
        <ul>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
                <div class="game-info">
                    <h1>BFWSOA</h1>
                    <p>
                        3万次下载 147.98M
                    </p>
                    <p>
                        BFW出品
                    </p>
                </div>
                <button>下载</button>
            </li>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
                <div class="game-info">
                    <h1>BFWKIT</h1>
                    <p>
                        4万次下载 97.98M
                    </p>
                    <p>
                        BFW出品
                    </p>
                </div>
                <button>下载</button>
            </li>
             <li>
                <img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
                <div class="game-info">
                    <h1>BFWSOA</h1>
                    <p>
                        3万次下载 147.98M
                    </p>
                    <p>
                        BFW出品
                    </p>
                </div>
                <button>下载</button>
            </li>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
                <div class="game-info">
                    <h1>BFWKIT</h1>
                    <p>
                        4万次下载 97.98M
                    </p>
                    <p>
                        BFW出品
                    </p>
                </div>
                <button>下载</button>
            </li>
              <li>
                <img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
                <div class="game-info">
                    <h1>BFWSOA</h1>
                    <p>
                        3万次下载 147.98M
                    </p>
                    <p>
                        BFW出品
                    </p>
                </div>
                <button>下载</button>
            </li>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
                <div class="game-info">
                    <h1>BFWKIT</h1>
                    <p>
                        4万次下载 97.98M
                    </p>
                    <p>
                        BFW出品
                    </p>
                </div>
                <button>下载</button>
            </li>
            
        </ul>
    </div>
</body>
</html>
pullToRefresh.js 浏览器上拉刷新加载插件

网友评论0

lazyload.js

pjax.js

pullToRefresh.js

pace.js

visible.pkgd.min.js

persist.min.js

agent.min.js

echo.min.js

headBand.min.js

nprogress.js
