html5如何封装下拉刷新
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍了html5如何封装下拉刷新，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
前端在工作当中难免会于原生的安卓和ios合作，去做一些H5嵌套的页面。但是实际开发中常常会遇到各种兼容问题，具体问题我就不一一列举了，这次我主要分享的是关于在原生中下拉刷新中双系统出现的兼容问题，最典型的就是在ios中会出现下拉弹簧这会大大增加前端在开发中遇到的奇特问题，所以本文结合实际，对此做些功能上的实现，也希望大家可以看过我实现原理后理解并运用到实际的开发过程中，真正做到举一反三，货不多说直接上代码。
首页css+html部分
*{ margin: 0; padding: 0; list-style: none; } body{ display: flex; justify-content: center; align-items: center; } .one{ width : 4rem; height: 7rem; border: 1px solid red; font-size: 0.35rem; box-sizing: border-box; overflow-y: auto; } .kl{ position: relative; } .lis{ width: 100%; height: 1rem; line-height: 1rem; text-align: center; background: red; } .lis:nth-child(2n+1){ background: pink; } .scroll{ height:100%; overflow: auto; -webkit-overflow-scrolling: touch; } .di{ position: relative; color: #c8c9cc; font-size: 0; vertical-align: middle; } .k{ width: 0.5rem; height: 0.5rem; display: inline-block; max-width: 100%; max-height: 100%; animation: theanimation 1s linear infinite; } .us{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; color:rgb(25, 137, 250) } .us:before{ display: block; width: 2px; height: 25%; margin: 0 auto; background-color: currentColor; border-radius: 40%; content: ' '; } .us:nth-child(1){ -webkit-transform: rotate(30deg); transform: rotate(30deg); opacity: 1; } .us:nth-child(2){ -webkit-transform: rotate(60deg); transform: rotate(60deg); opacity: 0.9375; } .us:nth-child(3){ -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0.875; } .us:nth-child(4){ -webkit-transform: rotate(120deg); transform: rotate(120deg); opacity: 0.8125; } .us:nth-child(5){ -webkit-transform: rotate(150deg); transform: rotate(150deg); opacity: 0.75; } .us:nth-child(6){ -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 0.6875; } .us:nth-child(7){ -webkit-transform: rotate(210deg); transform: rotate(210deg); opacity: 0.625; } .us:nth-child(8){ -webkit-transform: rotate(240deg); transform: rotate(240deg); opacity: 0.5625; } .us:nth-child(9){ -webkit-transform: rotate(270deg); transform: rotate(270deg); opacity: 0.5; } .us:nth-child(10){ -webkit-transform: rotate(300deg); transform: rotate(300deg); opacity: 0.4375; } .us:nth-child(11){ -webkit-transform: rotate(330deg); transform: rotate(330deg); opacity: 0.375; } .us:nth-child(12){ -webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 0.3125; } @keyframes theanimation{ from { transform: rotate(0deg);} to { transform: rotate(360deg);} } <!DOCTYPE html><html><head><meta charset="UTF-8"><title>下拉刷新</title><link rel="stylesheet" type="text/css" href="botm_x.css"/></head><style type="text/css"> </style><body><div class="one" ><div class="kl"><li class="lis">这是一个内容</li><li class="lis">这是一个内容</li><li class="lis">这是一个内容</li><li class="lis">这是一个内容</li> <li class="lis">这是一个内容</li> <li class="lis">这是一个内容</li> <li class="lis">这是一个内容</li><li class="lis">这是一个内容</li><li class="lis">这是一个内容</li><li class="lis">这是一个内容</li><li class="lis">这是一个内容</li></div></div></body><script type="text/javascript" class="lazy" data-src="适配.js"></script><script type="text/javascript" class="lazy" data-src="下拉刷新.js"></script></html>这里是模拟了一个简单的下拉刷新的模板。
接下来是js部分也是最主要的部分
window.loading = function() { var sin = 0; var sel = null; //計時器 var br = true; //判斷是否請求完所有的數據 var bl = true; //判斷是否ios an var all_H; //下拉高度 var xl_xu, sl_xu; //下拉選和上拉選 var str; let box = document.getElementsByClassName('one')[0] //獲取到整個的body let box_childer = document.getElementsByClassName('kl')[0] let li = document.querySelectorAll('li') //所有的li box.addEventListener('touchstart', start) //摁下事件 box.addEventListener('scroll', (e) => scrol(e)) //移動事件 box.addEventListener('touchend', end) //摁下離開事件 // box.addEventListener('touchmove',move_lin)//拖拽事件 function scrol(e) { //滾動事件 let move_scroll = br && bl ? e.target.scrollTop : NaN all_H = box.clientHeight + move_scroll if(all_H >= e.target.scrollHeight) { //觸底了 bl = false if(sin ^ 3) { ++sin } else { if(xl_xu) { return } establish(2) return false } br = false //創建一個節點來顯示所示內容 establish(); } } function end() { //鼠標離開事件 bl = true } function start(e) { //摁下事件 bl = true } function establish(a = 0) { //創建dom加載元素 if(a == 2) { //說明是最後一頁 xl_xu = document.createElement('div'); xl_xu.style.textAlign = 'center' xl_xu.innerHTML = '已經最後一頁了' box_childer.appendChild(xl_xu) return } if(xl_xu) { //說明有 那就先刪除 box_childer.removeChild(xl_xu) } xl_xu = document.createElement('div') xl_xu.style.textAlign = 'center' xl_xu.innerHTML = str box_childer.appendChild(xl_xu) sel = setTimeout(() => { box_childer.removeChild(xl_xu) xl_xu = null clearTimeout(sel); let a = Array.from({length: 5}, _ =>document.createElement('li')) for(let i = 0;i<a.length; i++) { a[i].classList.add('lis') box_childer.appendChild(a[i]) } sel = null br = true }, 1500) } function move_lin(e) { //托轉事件 if(!br) { var eve = e || event var touch = eve.touches[0] var clientW = box.scrollWidth; var clientH = box.clientHeight var start_y = (750 / clientW) * (touch.pageY) / 75 //距离当前页面的高度 var start_x = (750 / clientW) * (touch.pageX) / 75 //距离当前页面的宽度 console.log(start_y, start_x) } // console.log('托轉了',box_childer,all_H) } (function() { str =`<div class="di"'> <div class="k"> <li class="us"></li> <li class="us"></li> <li class="us"></li> <li class="us"></li> <li class="us"></li> <li class="us"></li> 这里我写了一个下拉刷新的deom <li class="us"></li> <li class="us"></li> <li class="us"></li> <li class="us"></li> <li class="us"></li> <li class="us"></li> </div></div>` })()}()整个代码的思想不是简单意义上的根据滚动长度和实际高度做判断，以为开头说过ios这方面会有弹簧的一个特性，所以不能这么判断，我这边通过监听摁下松开事件来多上了一层锁，这样更加的安全和高效。
下面是我的效果演示，实际开发中可根据自己的用途来修改代码
感谢你能够认真阅读完这篇文章，希望小编分享的“html5如何封装下拉刷新”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
