基于iScroll实现下拉刷新和上拉加载
index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现下拉刷新和上拉加载</title> <link rel="stylesheet" href="index.css"> <script> // window.devicePixelRatio获取当前的设备像素 let scale = 1.0 / window.devicePixelRatio; let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`; document.write(text); document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px"; </script> </head> <body> <div class="content"> <div class="content-in"> <!--下拉刷新 Start--> <div class="pull-down"> <img src="pull-down.png" alt=""> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px" viewBox="279.747 366.016 60 60" enable-background="new 279.747 366.016 60 60" xml:space="preserve"> <path id="refreshLogo" fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M301.144,374.58 c-16.549,5.334-25.163,23.41-15.075,37.437c8.615,12.051,26.864,15.606,40.692,8.001c10.995-6.025,14.282-18.768,7.368-28.349 c-5.555-7.705-17.229-9.977-26.07-5.137c-7.027,3.853-8.614,10.767-5.44,16.298c3.06,5.137,11.221,5.631,15.302,2.667 c5.44-4.05,4.193-10.568,1.474-15.31c-14.282-25.09,7.254-24.694,9.975-18.966"/> </svg> </div> <!--下拉刷新 End--> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <!--上拉加载 Start--> <div class="pull-up"> <p> <img src="pull-up.gif"> <span>上拉加载更多</span> </p> </div> <!--上拉加载 End--> </div> </div> <script src="zepto.js"></script> <script src="event.js"></script> <script src="iscroll-probe.js"></script> <script src="index.js"></script> </body> </html>
index.css：
子元素内容高度必须大于父元素高度才能有滚动效果* { padding: 0; margin: 0; touch-action: none; } html, body { width: 100%; height: 100%; font-size: 0.4rem; } .content { margin: 20px auto; width: 5rem; height: 10rem; border: 1px solid #000000; overflow: hidden; } .pull-down { width: 100%; height: 0.6rem; position: relative; } .pull-down img, svg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); } .pull-up { width: 100%; height: 0.98rem; } .pull-up p { padding-top: 0.29rem; text-align: center; box-sizing: border-box; font-size: 0.24rem; }
index.js：
$(function () { /*公共头部处理*/ $(".header-center-box>input").focus(function () { $(".header").addClass("active"); }); $(".header-cancle").click(function () { $(".header").removeClass("active"); }); $(".header-switch>span").click(function () { $(".header-switch>i").animate({left: this.offsetLeft}, 30); $(this).addClass("active").siblings().removeClass("active"); }); /*公共底部处理*/ let pageArray = ["home", "video", "me", "friend", "account"]; $(".footer>ul>li").click(function () { // 切换底部图标 $(this).addClass("active").siblings().removeClass("active"); let url = $(this).find("img").attr("src"); url = url.replace("normal", "selected"); $(this).find("img").attr("src", url); $(this).siblings().find("img").forEach(function (oImg) { oImg.src = oImg.src.replace("selected", "normal"); }); // 切换头部样式 let current = pageArray[$(this).index()]; $(".header").removeClass().addClass("header " + current); }); /*公共内容处理*/ // 1.获取SVG路径的长度 let length = $("#refreshLogo").get(0).getTotalLength(); // 2.默认先隐藏路径 $("#refreshLogo").css({"stroke-dasharray": length}); $("#refreshLogo").css({"stroke-dashoffset": length}); // 3.创建IScroll对象 let myScroll = new IScroll('.content', { mouseWheel: false,// 不侦听鼠标滚轮事件 scrollbars: false,// 不需要滚动条 /* 使用scroll事件需要配置probeType 1 滚动不繁忙的时候触发 2 滚动时每隔一定时间触发 3 每滚动一像素触发一次 */ probeType: 3, }); // 获取下拉图片高度 let logoHeight = $(".pull-down").height(); // 标记是否需要刷新 let isPullDown = false; // 处理重复刷新数据,判断是是否正在刷新中,刷新中,则禁止反复刷新 let isRefresh = false; // 获取上拉图片高度 let bottomHeight = $(".pull-up").height(); // 最大回弹位置 let maxOffsetY = myScroll.maxScrollY - bottomHeight; // 标记是否需要加载 let isPullUp = false; // scroll事件只有在scroll-probe.js版本中有效 myScroll.on('scroll', function () { if (this.y - logoHeight >= 0) { /*下拉刷新和上拉加载*/ // this.y:滚动高度,*3能提高绘制路径的时间 if (((this.y - logoHeight) * 3) <= length) { // 绘制路径 $("#refreshLogo").css({"stroke-dashoffset": length - (this.y - logoHeight) * 3}); } else { // console.log(this.y); // svg画完后固定的位置，应与this.y相等 this.minScrollY = 170; isPullDown = true; } } else if (this.y <= maxOffsetY) { /*上拉加载*/ this.maxScrollY = maxOffsetY; isPullUp = true; $(".pull-up>p>span").html("松手加载更多"); } }); // scrollEnd表示停止滚动 myScroll.on('scrollEnd', function () { if (isPullDown && !isRefresh) { isRefresh = true; // 去网络加载数据 refreshDown(); } else if (isPullUp && !isRefresh) { isRefresh = true; $(".pull-up>p>span").html("加载中..."); // 去网络加载数据 refreshUp(); } }); // 模拟刷新网络 function refreshDown() { setTimeout(function () { isPullDown = false; isRefresh = false; myScroll.minScrollY = 0; // iScroll回弹到初始位置 myScroll.scrollTo(0, 0); // SVG回弹到初始位置 $("#refreshLogo").css({"stroke-dashoffset": length}); }, 100); } // 模拟加载网络 function refreshUp() { setTimeout(function () { isPullUp = false; isRefresh = false; myScroll.maxScrollY = maxOffsetY + bottomHeight; myScroll.scrollTo(0, myScroll.maxScrollY); $(".pull-up>p>span").html("上拉加载更多"); }, 2000); } })
