html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

JQuery插件iScroll实现下拉刷新,滚动翻页特效_jquery_

[ ] 已经帮助:人解决问题

JQuery插件:iScrolltAiHTML5中文学习网 - HTML5先行者学习网

页面布局:tAiHTML5中文学习网 - HTML5先行者学习网

<div id="wrapper">  <div id="scroller">   <div id="pullDown">    <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>   </div>   <ul id="thelist">    <li>     <img src="img/page1_img1.jpg" />    </li>    <li>     <img src="img/page1_img2.jpg" />    </li>    <li>     <img src="img/page1_img3.jpg" />    </li>    <li>     <img src="img/page1_img1.jpg" />    </li>    <li>     <img src="img/page1_img2.jpg" />    </li>    <li>     <img src="img/page1_img3.jpg" />    </li>   </ul>   <div id="pullUp">    <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>   </div>  </div>

翻页,是通过ajax请求,把页码传入一般处理程序,在一般处理程序中获得分页后的数据返回json数组对象。tAiHTML5中文学习网 - HTML5先行者学习网

下拉刷新:tAiHTML5中文学习网 - HTML5先行者学习网

/**  * 下拉刷新 (自定义实现此方法)  * myScroll.refresh(); // 数据加载完成后,调用界面更新方法  */  function pullDownAction() {   setTimeout(function () {     var el, li, i;    el = document.getElementById('thelist');    //==========================================    $.ajax({     type: "GET",     url: "LoadMore.ashx",     data: { page: generatedCount },     dataType: "json",     success: function (data) {      var json = data;      $(json).each(function () {       li = document.createElement('li');       // li.innerText = 'Generated row ' + (++generatedCount);       li.innerHTML = '<img src="' + this.src + '"/>';       el.insertBefore(li, el.childNodes[0]);      })     }    });    myScroll.refresh(); //数据加载完成后,调用界面更新方法  Remember to refresh when contents are loaded (ie: on ajax completion)   }, 1000);  // <-- Simulate network congestion, remove setTimeout from production!  }

上拉刷新tAiHTML5中文学习网 - HTML5先行者学习网

function pullUpAction() {   setTimeout(function () {      var el, li, i;    el = document.getElementById('thelist');    //==========================================    $.ajax({     type: "GET",     url: "LoadMore.ashx",     data: { page: generatedCount },     dataType: "json",     success: function (data) {      var json = data;      $(json).each(function () {       li = document.createElement('li');       //  li.innerText = 'Generated row ' + (++generatedCount);       li.innerHTML = '<img src="' + this.src + '"/>;            el.insertBefore(li, el.childNodes[0]);      })     }    });    //============================================    myScroll.refresh(); // 数据加载完成后,调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)   }, 1000); // <-- Simulate network congestion, remove setTimeout from production!  }

初始化tAiHTML5中文学习网 - HTML5先行者学习网

/**  * 初始化iScroll控件  */  function loaded() {   pullDownEl = document.getElementById('pullDown');   pullDownOffset = pullDownEl.offsetHeight;   pullUpEl = document.getElementById('pullUp');   pullUpOffset = pullUpEl.offsetHeight;   myScroll = new iScroll('wrapper', {    scrollbarClass: 'myScrollbar', /* 重要样式 */    useTransition: false,    topOffset: pullDownOffset,    onRefresh: function () {     if (pullDownEl.className.match('loading')) {      pullDownEl.className = '';      pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';     } else if (pullUpEl.className.match('loading')) {      pullUpEl.className = '';      pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';     }    },    onScrollMove: function () {     if (this.y > 5 && !pullDownEl.className.match('flip')) {      pullDownEl.className = 'flip';      pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';      this.minScrollY = 0;     } else if (this.y < 5 && pullDownEl.className.match('flip')) {      pullDownEl.className = '';      pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';      this.minScrollY = -pullDownOffset;     } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {      pullUpEl.className = 'flip';      pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';      this.maxScrollY = this.maxScrollY;     } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {      pullUpEl.className = '';      pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';      this.maxScrollY = pullUpOffset;     }    },    onScrollEnd: function () {     if (pullDownEl.className.match('flip')) {      pullDownEl.className = 'loading';      pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';      pullDownAction(); // Execute custom function (ajax call?)     } else if (pullUpEl.className.match('flip')) {      pullUpEl.className = 'loading';      pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';      pullUpAction(); // Execute custom function (ajax call?)     }    }   });   setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);  }  //初始化绑定iScroll控件   document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);  document.addEventListener('DOMContentLoaded', loaded, false);

tAiHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助