你的位置:首页 > 软件开发 > Java > jQuery手机端上拉刷新下拉加载更多页面

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

发布时间:2015-08-07 13:00:05
基于jQuery手机端上拉下拉刷新页面代码。这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码。效果图如下:在线预览 源码下载实现的代码。html代码: <div id="wrapper"> <ul> ...

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

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

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

在线预览    源码下载

实现的代码。

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>

原标题:jQuery手机端上拉刷新下拉加载更多页面

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录