jQuery手机端上拉刷新下拉加载更多页面

2024-04-27 15:00:26

字体：大中小

来源：转载

供稿：网友

基于jQuery手机端上拉下拉刷新页面代码。这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码。效果图如下：

在线预览源码下载

实现的代码。

html代码：

 <div id="wrapper">        <ul>            <li>row 10</li>            <li>row 9</li>            <li>row 8</li>            <li>row 7</li>            <li>row 6</li>            <li>row 5</li>            <li>row 4</li>            <li>row 3</li>            <li>row 2</li>            <li>row 1</li>        </ul>    </div>    <script>        for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {            document.querySelectorAll("#wrapper ul li")[i].colorfulBg();        }        refresher.init({            id: "wrapper",//<------------------------------------------------------------------------------------┐            pullDownAction: Refresh,            pullUpAction: Load        });        var generatedCount = 0;        function Refresh() {            setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from PRoduction!                var el, li, i;                el = document.querySelector("#wrapper ul");                el.innerHTML = '';                for (i = 0; i < 11; i++) {                    li = document.createElement('li');                    li.appendChild(document.createTextNode('async row ' + (++generatedCount)));                    el.insertBefore(li, el.childNodes[0]);                }                wrapper.refresh();/****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/                for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {                    document.querySelectorAll("#wrapper ul li")[i].colorfulBg();                }            }, 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.appendChild(document.createTextNode('async row ' + (++generatedCount)));                    el.appendChild(li, el.childNodes[0]);                }                wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/                for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {                    document.querySelectorAll("#wrapper ul li")[i].colorfulBg();                }            }, 1000);        }    </script>