Better-scroll-上拉重新整理-下拉載入.html
阿新 • • 發佈：2019-02-20
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>better-scroll</title> <script src="js/bscroll.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> html, body{ margin: 0; padding: 0; width: 100%; height: 100%; } ul{ margin: 0; padding: 0; list-style: none; } .wrap{ width: 100%; height: 300px; box-sizing: border-box; overflow: hidden; background: #ccc; } .list { position: relative; } .list li { width: 100vw; height: 50px; font: 30px/50px "微軟雅黑"; box-sizing: border-box; text-align: center; border: 1px solid #000000; background: #f1f1f1; } .pullDown:before, .pullUp:after{ content: attr(data-text); width: 100vw; height: 50px; font: 16px/50px "微軟雅黑"; box-sizing: border-box; text-align: center; color: #999; } .pullDown:before{ position: absolute; left: 0; top: -50px; } .tip{ position: absolute; top: -50px; left: 0; width: 100%; height: 50px; line-height: 50px; text-align: center; background: #CC3F6E; z-index: 999; } </style> </head> <body> <div class="wrap"> <div class="box" style="position: relative;"> <div class="tip">公司Logo之類的</div> <ul class="list" data-text = "正在載入..."></ul> </div> </div> <script type="text/javascript"> /* * 生成元素 *// (function(){ let list = document.querySelector(".list"); let con = document.querySelector(".con"); let inner = ''; for (var i = 0; i < 10; i++) { inner += '<li>'+ i +'</li>'; } list.innerHTML += inner; })(); (function(){ /* * 滑動的是第0個子元素，其實和自己寫的是一樣的思路，或者說自己和別人是一樣的思路 * */ let wrap = document.querySelector(".wrap"); let list = document.querySelector(".list"); let tip = document.querySelector(".tip"); let bScroll = new BScroll(wrap, { scrollY: true, pullUpLoad: { threshold: 50 }, pullDownRefresh: { threshold: 50, stop: 50 } }); /* * pullingUp: 監聽的應該是，元素滾動過程中，被滾動的那個元素的底邊與父級外框底邊的距離，如果達到某個值，就執行其回撥函式； * finishPullUp: 這個類似控制一個開關，比如在觸發pullingUp事件的時候，外掛肯定會把一個開關給關掉，防止使用者重複上拉 * 在資料載入完成以後，需要執行finishPullUp()把開關開啟，以便下次可以繼續執行上拉重新整理； * refresh：其實就是重新計算一下內容的高度和寬度，也許也會計算外框的高度和寬度，因為dom結構發生了變化了，所以寬高要從新計算 * 以為整個外掛基本上都是在計算一些距離差值，所以肯定需要從新計算的； * * 雖然沒看過原始碼，但是看過類似的iScroll的教程，自己也寫過類似的外掛，只不過自己寫的外掛沒那麼好用而已； */ bScroll.on("pullingUp", function(){ console.log('正在載入....'); list.classList.add("pullUp"); setTimeout(function(){ var inner = ''; for (var i=0; i<5; i++) { inner += '<li>新增的'+ i +'</li>'; } list.innerHTML += inner; this.finishPullUp(); this.refresh(); list.classList.remove("pullUp"); console.log('載入完成'); }.bind(this),1000); }); /* * 下拉更新： * 下拉更新的觸發時機是使用者手指擡起的時候觸發的，在手指擡起的時候計算滾動元素上邊距與父級元素上邊距的距離是否大於了threshold， * 如果大於的話就觸發pullingDown的回撥函式； * stop： 在下拉更新的時候，滾動元素停留在哪個位置，一般都是用來放置提示文字的，比如loading之類的 * finishPullDown()後就會自動回到0的位置 */ bScroll.on("pullingDown", function(){ console.log("下拉更新"); list.classList.add("pullDown"); tip.style.display = 'none'; setTimeout(function(){ var inner = ''; for (var i=0; i<5; i++) { inner += '<li>新增的'+ i +'</li>'; } list.innerHTML = inner + list.innerHTML; this.finishPullDown(); this.refresh(); list.classList.remove("pullDown"); setTimeout(function(){ tip.style.display = 'block'; },100); console.log("下拉更新結束"); }.bind(this),3000); }); })(); </script> </body> </html>