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>