移動web 上下拉重新整理，支援iscroll滾動內容和普通內容(沒有滾動的)。。。
阿新 • • 發佈：2019-02-02
效果圖：
主要程式碼：
UpDownRefresh.css
.UpDownRefresh_loading { width: 36px; height: 36px; border-radius: 50%; border: 5px solid white; border-left: 5px solid cyan; border-right: 5px solid cyan; -webkit-animation: UpDownRefresh_load 1s linear infinite; } @-webkit-keyframes UpDownRefresh_load { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
UpDownRefresh.js
function UpDownRefresh(identifier) { this.iscroll;//iscroll物件 this.wrapper;//iscroll最外層的div wrapper // this.identifier;//唯一標尺 this.content;//不是滾動檢視的物件 var header_refresh_icon, footer_refresh_icon; var _this = this; var isRefresh = false, isBeingRefresh = false, isFooterRefresh = false, isFooterBeingRefresh = false; var bodyWidth = document.body.offsetWidth ? document.body.offsetWidth : document.documentElement.clientWidth; var headerRefreshingCallBack, footerRefreshingCallBack;//重新整理回撥 var yDistance = 30; //觸發重新整理的距離 var contentTop; function commonrefresh_icon_style(refresh_icon) { refresh_icon.style.backgroundColor = "white"; refresh_icon.style.textAlign = "center"; refresh_icon.style.width = "40px"; refresh_icon.style.height = "40px"; refresh_icon.style.lineHeight = "36px"; refresh_icon.style.borderRadius = "50%"; refresh_icon.style.color = "black"; refresh_icon.style.fontSize = "8px"; refresh_icon.style.position = "absolute"; refresh_icon.style.padding = "2px"; refresh_icon.style.display = "none"; refresh_icon.style.boxShadow = " 0 0 30px black"; } this.addHeaderRefreshing = function(CallBack) { if(_this.iscroll) { addScrollerHeaderRefreshing(CallBack); } else if(_this.content){ addContentHeaderRefreshing(CallBack); } } function addScrollerHeaderRefreshing(CallBack) { _this.headerRefreshingCallBack = CallBack; header_refresh_icon = document.getElementById("header_refresh_icon_"+identifier) if(header_refresh_icon != null) { wrapper.removeChild(header_refresh_icon); header_refresh_icon = null; } header_refresh_icon = document.createElement("div"); header_refresh_icon.setAttribute("id","header_refresh_icon_"+identifier); header_refresh_icon.style.top = 0; commonrefresh_icon_style(header_refresh_icon); wrapper.appendChild(header_refresh_icon); _this.iscroll.on("scrollEnd", function() { if(!isBeingRefresh) { if(isRefresh) { _this.headerBeginRefreshing(); } else { _this.headerEndRefreshing(); } } }); _this.iscroll.on("scroll", function() { var y = this.y; if(!isBeingRefresh) { if(y < 0) { header_refresh_icon.style.top = y + "px"; } else { header_refresh_icon.innerText = "下拉重新整理"; header_refresh_icon.style.display = "inline-block"; isRefresh = false; if(y > yDistance) { y = yDistance; header_refresh_icon.innerText = "釋放重新整理"; isRefresh = true; } header_refresh_icon.style.top = y + "px"; } header_refresh_icon.style.left = (bodyWidth - header_refresh_icon.getBoundingClientRect().width) / 2 + "px"; } }); } function addContentHeaderRefreshing(CallBack) { _this.headerRefreshingCallBack = CallBack; _this.content.addEventListener('touchstart', touch, false); _this.content.addEventListener('touchmove', touch, false); _this.content.addEventListener('touchend', touch, false); var clientRect = _this.content.getBoundingClientRect(); contentTop = clientRect.top + document.body.scrollTop; var startY, moveY; header_refresh_icon = document.getElementById("header_refresh_icon_"+identifier) if(header_refresh_icon != null) { _this.content.removeChild(header_refresh_icon); header_refresh_icon = null; } header_refresh_icon = document.createElement("div"); header_refresh_icon.setAttribute("id","header_refresh_icon_"+identifier); header_refresh_icon.style.top = contentTop +"px"; commonrefresh_icon_style(header_refresh_icon); _this.content.appendChild(header_refresh_icon); function touch(event) { switch(event.type) { case "touchstart": startY = event.touches[0].pageY; break; case "touchend": if(!isBeingRefresh) { if(isRefresh) { _this.headerBeginRefreshing(); } else { _this.headerEndRefreshing(); } } break; case "touchmove": event.preventDefault(); moveY = event.touches[0].pageY; var y = moveY - startY; if(!isBeingRefresh) { if(y < 0) { var top = contentTop+y; if(top < contentTop) { top = contentTop; } header_refresh_icon.style.top = top+ "px"; } else { header_refresh_icon.innerText = "下拉重新整理"; header_refresh_icon.style.display = "inline-block"; isRefresh = false; if(y > yDistance) { y = yDistance; header_refresh_icon.innerText = "釋放重新整理"; isRefresh = true; } header_refresh_icon.style.top = (contentTop+y) + "px"; } header_refresh_icon.style.left = (bodyWidth - header_refresh_icon.getBoundingClientRect().width) / 2 + "px"; } break; } } } this.headerBeginRefreshing = function() { isRefresh = true; isBeingRefresh = true; header_refresh_icon.style.display = "inline-block"; if(contentTop) { header_refresh_icon.style.top = (yDistance+contentTop) + "px"; }else { header_refresh_icon.style.top = yDistance + "px"; } header_refresh_icon.innerHTML = '<div class="UpDownRefresh_loading"></div>'; header_refresh_icon.style.left = (bodyWidth - header_refresh_icon.getBoundingClientRect().width) / 2 + "px"; _this.headerRefreshingCallBack(); } this.headerEndRefreshing = function() { isRefresh = false; isBeingRefresh = false; header_refresh_icon.style.display = "none"; if(contentTop) { header_refresh_icon.style.top = contentTop+"px"; }else { header_refresh_icon.style.top = 0; } } this.addFooterRefreshing = function(CallBack) { _this.footerRefreshingCallBack = CallBack; scroller = document.querySelector(_this.scrollerEl); footer_refresh_icon = document.createElement("div"); footer_refresh_icon.style.bottom = 0; commonrefresh_icon_style(footer_refresh_icon); wrapper.appendChild(footer_refresh_icon); var maxScrollY = _this.iscroll.maxScrollY; _this.iscroll.on("scrollEnd", function() { if(!isFooterBeingRefresh) { if(isFooterRefresh) { _this.footerBeginRefreshing(); } else { _this.footerEndRefreshing(); } } }); _this.iscroll.on("scroll", function() { var y = this.y; if(!isFooterBeingRefresh) { if(y > maxScrollY) { footer_refresh_icon.style.bottom = (maxScrollY - y) + "px"; } else { footer_refresh_icon.innerText = "上拉載入"; footer_refresh_icon.style.display = "inline-block"; isFooterRefresh = false; if(y < maxScrollY) { y = maxScrollY - y; if(y > yDistance) { y = yDistance; footer_refresh_icon.innerText = "釋放載入"; isFooterRefresh = true; } } footer_refresh_icon.style.bottom = y + "px"; } footer_refresh_icon.style.left = (bodyWidth - footer_refresh_icon.getBoundingClientRect().width) / 2 + "px"; } }); } this.footerBeginRefreshing = function() { isFooterRefresh = true; isFooterBeingRefresh = true; footer_refresh_icon.style.display = "inline-block"; footer_refresh_icon.style.bottom = yDistance + "px"; footer_refresh_icon.innerHTML = '<div class="UpDownRefresh_loading"></div>'; footer_refresh_icon.style.left = (bodyWidth - footer_refresh_icon.getBoundingClientRect().width) / 2 + "px"; _this.footerRefreshingCallBack(); } this.footerEndRefreshing = function() { isFooterRefresh = false; isFooterBeingRefresh = false; footer_refresh_icon.style.display = "none"; footer_refresh_icon.style.bottom = 0; } }
使用：
<!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></title> <script src="js/mui.min.js"></script> <script src="js/iscroll/iscroll-probe.js"></script> <script src="js/UpDownRefresh/UpDownRefresh.js"></script> <link href="js/UpDownRefresh/UpDownRefresh.css" rel="stylesheet" /> <link href="css/mui.min.css" rel="stylesheet" /> <script type="text/javascript" charset="utf-8"> mui.init(); </script> <style type="text/css"> * { margin: 0; padding: 0; border: 0; } body { width: 100%; height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; } #wrapper { height: 50vh; width: 100%; text-align: center; overflow: hidden; position: relative; background-color: royalblue; } ul { min-height: 51vh; } #one { background-color: brown; width: 100%; height: 30vh; } </style> </head> <body> 普通內容,沒有滾動 <div id="one"> </div> 滾動內容 iscroll <div id="wrapper"> <div id="scroller"> <ul id="ul"> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> </div> </div> </body> <script type="text/javascript"> mui.ready(function() { var myScroll = new IScroll('#wrapper', { scrollbars: false, mouseWheel: true, interactiveScrollbars: true, shrinkScrollbars: 'scale', fadeScrollbars: true, probeType: 2, }); var upDownRefresh = new UpDownRefresh("one"); upDownRefresh.iscroll = myScroll; upDownRefresh.wrapper = document.getElementById("wrapper"); upDownRefresh.addHeaderRefreshing(function() { setTimeout(function() { myScroll.refresh(); upDownRefresh.headerEndRefreshing(); }, 3000); }); upDownRefresh.addFooterRefreshing(function() { setTimeout(function() { myScroll.refresh(); upDownRefresh.footerEndRefreshing(); }, 3000); }); upDownRefresh.headerBeginRefreshing(); var upDownRefresh2 = new UpDownRefresh("two"); upDownRefresh2.content = document.getElementById("one"); upDownRefresh2.addHeaderRefreshing(function() { setTimeout(function() { upDownRefresh2.headerEndRefreshing(); }, 3000); }); upDownRefresh2.headerBeginRefreshing(); }) </script> </html>