企业网站制作建站公司,开源展示型网站,义乌 网站建设推广营销,自己做网站 怎么赚钱上拉或者下拉刷新的需求在移动端是非常常见的需求#xff0c;大部分情况下#xff0c;实现这个效果都使用网上现有的解决方案#xff0c;例如有人使用swiper这个插件#xff0c; 也有人使用iScroll这个滚动插件。本文的示例是利用iscroll实现的下拉刷新效果。 iScroll简介 …上拉或者下拉刷新的需求在移动端是非常常见的需求大部分情况下实现这个效果都使用网上现有的解决方案例如有人使用swiper这个插件 也有人使用iScroll这个滚动插件。本文的示例是利用iscroll实现的下拉刷新效果。 iScroll简介 iScrool是目前最成熟的自定义滚动解决方案之一在移动端和PC有很好的兼容性。iScroll官方提供了5个不同的版本 iscroll.js 通用版 包含了大部分公共特性iscroll-lite.js 缩减版 削减了一些功能特性例如滚动条鼠标滚轮等等iscroll-probe.js 探索版 此版本可以满足你获取滚动条位置的需求。iscroll-zoom.js 滚动缩放版iscroll-infinite.js 无限制版根据不同的需求选择相应的版本当前的示例中我们选择的是iscroll-probe.js版。Gitbook地址iScroll API 中文版 详细使用 代码思路则是利用监听滚动条的scroll事件判断下拉或者上拉的距离做上触发距离标记当scrollEnd事件触发时执行数据加载。让我们看核心部分代码 HTML代码结构 div idMyScroller classmain div classwarpper div idPullDown classscroller-pullDown styledisplay: none; img stylewidth: 20px; height: 20px; srcrolling.svg / span idpullDown-msg classpull-down-msg下拉刷新/span /div ul idContent classdropdown-list /ul div idPullUp classscroller-pullUp styledisplay: none; img stylewidth: 20px; height: 20px; srcrolling.svg / span idpullUp-msg classpull-up-msg上拉刷新/span /div /div /div CSS样式 .scroller {position: relative; width: 100%; height: 100%; } .scroller .warpper { position: absolute; width: 100%; } .scroller-pullDown, .scroller-pullUp { width: 100%; height: 30px; padding: 10px 0; text-align: center; } .dropdown-list { padding: 0; margin: 0; } .dropdown-list li { width: 100%; background: #ddd; line-height: 45px; text-align: center; color: #FFF; border-bottom: 1px solid #FFF; } javascript var pullDown document.querySelector(#PullDown), pullUp document.querySelector(#PullUp), isPulled false; // 拉动标记 var myScroll new IScroll(#MyScroller, { probeType: 3, mouseWheel: true, scrollbars: true, preventDefault: false, fadeScrollbars: true }); myScroll.on(scroll, function() { var height this.y, bottomHeight this.maxScrollY - height; // 控制下拉显示 if (height 60) { pullDown.style.display block; isPulled true; return; } else if (height 60 height 0) { pullDown.style.display none; return; } // 控制上拉显示 if (bottomHeight 60) { pullUp.style.display block; isPulled true; return; } else if (bottomHeight 60 bottomHeight 0) { pullUp.style.display none; return; } }) myScroll.on(scrollEnd, function() { // 滚动结束 if (isPulled) { // 如果达到触发条件则执行加载 isPulled false; appendContent(getContents()); myScroll.refresh(); } }); 完整的demo请看: http://wewoor.github.io/js-lab/iscroll-pulldown-load/index.html 原文地址 http://imziv.com/blog/article/read.htm?id73转载于:https://www.cnblogs.com/zivxiaowei/p/5566518.html
