前端画面－下拉后滚动
生活随笔
收集整理的這篇文章主要介紹了
前端画面－下拉后滚动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
?
前端出現混合模式，一個站點需要手機訪問和PC訪問，在進行混合模式中，一個分頁下拉滾動的功能是需要自己考慮的，這里有兩種方法，自己開發和使用插件。為了減少開發復雜難度，插件有：iscroll 和?https://github.com/ximan/dropload，這個都是沒有實驗過的插件，在進行插件使用的時候，值得注意的點在于，iscroll-probe.js的插件中，有一個參數一定要注意，
//preventDefault: true,
這個參數是將A標簽對應的默認事件都去除，使得A標簽將會失效，如果你需要將A標簽釋放出來，那么，這個參數需要修改為false即可，還有一個地方需要注意，如果進行加載的時候，有出現拉下，松手后反彈的情況，那么，將異步加載的方式設置為?
async: false,
效果會更好，所以，在前端的時候值得注意點的是這兩個，然后附上前端部分js代碼，進行使用，
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>iScroll demo: simple</title><script type="text/javascript" src="../../src/iscroll.js"></script><script type="text/javascript">var myScroll,pullDownEl, pullDownOffset,pullUpEl, pullUpOffset,generatedCount = 0;function pullDownAction () {setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!var el, li, i;el = document.getElementById('thelist');for (i=0; i<3; i++) {li = document.createElement('li');li.innerText = 'Generated row ' + (++generatedCount);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! }function pullUpAction () {setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!var el, li, i;el = document.getElementById('thelist');for (i=0; i<3; i++) {li = document.createElement('li');li.innerText = 'Generated row ' + (++generatedCount);el.appendChild(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! }function loaded() {pullDownEl = document.getElementById('pullDown');pullDownOffset = pullDownEl.offsetHeight;pullUpEl = document.getElementById('pullUp'); pullUpOffset = pullUpEl.offsetHeight;myScroll = new iScroll('wrapper', {useTransition: true,topOffset: pullDownOffset,onRefresh: function () {if (pullDownEl.className.match('loading')) {pullDownEl.className = '';pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';} else if (pullUpEl.className.match('loading')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';}},onScrollMove: function () {if (this.y > 5 && !pullDownEl.className.match('flip')) {pullDownEl.className = 'flip';pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';this.minScrollY = 0;} else if (this.y < 5 && pullDownEl.className.match('flip')) {pullDownEl.className = '';pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';this.minScrollY = -pullDownOffset;} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {pullUpEl.className = 'flip';pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';this.maxScrollY = this.maxScrollY;} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';this.maxScrollY = pullUpOffset;}},onScrollEnd: function () {if (pullDownEl.className.match('flip')) {pullDownEl.className = 'loading';pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...'; pullDownAction(); // Execute custom function (ajax call?)} else if (pullUpEl.className.match('flip')) {pullUpEl.className = 'loading';pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...'; pullUpAction(); // Execute custom function (ajax call?) }}});setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800); }document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false); </script><style type="text/css" media="all"> body,ul,li {padding:0;margin:0;border:0; }body {font-size:12px;-webkit-user-select:none;-webkit-text-size-adjust:none;font-family:helvetica; }#header {position:absolute; z-index:2;top:0; left:0;width:100%;height:45px;line-height:45px;background-color:#d51875;background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);padding:0;color:#eee;font-size:20px;text-align:center; }#header a {color:#f3f3f3;text-decoration:none;font-weight:bold;text-shadow:0 -1px 0 rgba(0,0,0,0.5); }#footer {position:absolute; z-index:2;bottom:0; left:0;width:100%;height:48px;background-color:#222;background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));background-image:-moz-linear-gradient(top, #999, #666 2%, #222);background-image:-o-linear-gradient(top, #999, #666 2%, #222);padding:0;border-top:1px solid #444; }#wrapper {position:absolute; z-index:1;top:45px; bottom:48px; left:-9999px;width:100%;background:#aaa;overflow:auto; }#scroller {position:absolute; z-index:1; /* -webkit-touch-callout:none;*/-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%;padding:0; }#scroller ul {list-style:none;padding:0;margin:0;width:100%;text-align:left; }#scroller li {padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #ccc;border-top:1px solid #fff;background-color:#fafafa;font-size:14px; }#myFrame {position:absolute;top:0; left:0; }/**** Pull down styles**/ #pullDown, #pullUp {background:#fff;height:40px;line-height:40px;padding:5px 10px;border-bottom:1px solid #ccc;font-weight:bold;font-size:14px;color:#888; } #pullDown .pullDownIcon, #pullUp .pullUpIcon {display:block; float:left;width:40px; height:40px;background:url(pull-icon@2x.png) 0 0 no-repeat;-webkit-background-size:40px 80px; background-size:40px 80px;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:250ms; } #pullDown .pullDownIcon {-webkit-transform:rotate(0deg) translateZ(0); } #pullUp .pullUpIcon {-webkit-transform:rotate(-180deg) translateZ(0); }#pullDown.flip .pullDownIcon {-webkit-transform:rotate(-180deg) translateZ(0); }#pullUp.flip .pullUpIcon {-webkit-transform:rotate(0deg) translateZ(0); }#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {background-position:0 100%;-webkit-transform:rotate(0deg) translateZ(0);-webkit-transition-duration:0ms;-webkit-animation-name:loading;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear; }@-webkit-keyframes loading {from { -webkit-transform:rotate(0deg) translateZ(0); }to { -webkit-transform:rotate(360deg) translateZ(0); } }</style> </head> <body><div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div> <div id="wrapper"><div id="scroller"><div id="pullDown"><span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span></div><ul id="thelist"><li>Pretty row 1</li><li>Pretty row 2</li><li>Pretty row 3</li><li>Pretty row 4</li><li>Pretty row 5</li><li>Pretty row 6</li><li>Pretty row 7</li><li>Pretty row 8</li><li>Pretty row 9</li><li>Pretty row 10</li><li>Pretty row 11</li><li>Pretty row 12</li><li>Pretty row 13</li><li>Pretty row 14</li><li>Pretty row 15</li><li>Pretty row 16</li><li>Pretty row 17</li><li>Pretty row 18</li><li>Pretty row 19</li><li>Pretty row 20</li><li>Pretty row 21</li><li>Pretty row 22</li><li>Pretty row 23</li><li>Pretty row 24</li><li>Pretty row 25</li><li>Pretty row 26</li><li>Pretty row 27</li><li>Pretty row 28</li><li>Pretty row 29</li><li>Pretty row 30</li><li>Pretty row 31</li><li>Pretty row 32</li><li>Pretty row 33</li><li>Pretty row 34</li><li>Pretty row 35</li><li>Pretty row 36</li><li>Pretty row 37</li><li>Pretty row 38</li><li>Pretty row 39</li><li>Pretty row 40</li></ul><div id="pullUp"><span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span></div></div> </div> <div id="footer"></div></body> </html> View Code這個是官網的demo：地址view-source:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
?
主要的js代碼片段
var myScroll,pullDownEl, pullDownOffset,pullUpEl, pullUpOffset,generatedCount = 0;function pullDownAction () {setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!var el, li, i;el = document.getElementById('thelist');for (i=0; i<3; i++) {li = document.createElement('li');li.innerText = 'Generated row ' + (++generatedCount);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! }function pullUpAction () {setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!var el, li, i;el = document.getElementById('thelist');for (i=0; i<3; i++) {li = document.createElement('li');li.innerText = 'Generated row ' + (++generatedCount);el.appendChild(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! }function loaded() {pullDownEl = document.getElementById('pullDown');pullDownOffset = pullDownEl.offsetHeight;pullUpEl = document.getElementById('pullUp'); pullUpOffset = pullUpEl.offsetHeight;myScroll = new iScroll('wrapper', {useTransition: true,topOffset: pullDownOffset,onRefresh: function () {if (pullDownEl.className.match('loading')) {pullDownEl.className = '';pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';} else if (pullUpEl.className.match('loading')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';}},onScrollMove: function () {if (this.y > 5 && !pullDownEl.className.match('flip')) {pullDownEl.className = 'flip';pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';this.minScrollY = 0;} else if (this.y < 5 && pullDownEl.className.match('flip')) {pullDownEl.className = '';pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';this.minScrollY = -pullDownOffset;} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {pullUpEl.className = 'flip';pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';this.maxScrollY = this.maxScrollY;} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';this.maxScrollY = pullUpOffset;}},onScrollEnd: function () {if (pullDownEl.className.match('flip')) {pullDownEl.className = 'loading';pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...'; pullDownAction(); // Execute custom function (ajax call?)} else if (pullUpEl.className.match('flip')) {pullUpEl.className = 'loading';pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...'; pullUpAction(); // Execute custom function (ajax call?) }}});setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800); }document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false); View Code?使用的時候注意
轉載于:https://www.cnblogs.com/rainy-shurun/p/5570890.html
總結
以上是生活随笔為你收集整理的前端画面－下拉后滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 从一个数组中提取出第start位到第en
- 下一篇： etrace 跟踪程序函数动态执行流程