您的位置:首页 > 网页设计

h5封装下拉刷新

出处:网络 时间:2020-11-12 05:10:13

前端在工作当中难免会于原生的安卓和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><p class="one" ><p 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></p></p></body><script type="text/javascript" src="适配.js"></script><script type="text/javascript" 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('p'); 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('p') 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 =`<p class="di"'> <p 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> </p></p>` })()}()

整个代码的思想不是简单意义上的根据滚动长度和实际高度做判断,以为开头说过ios这方面会有弹簧的一个特性,所以不能这么判断,我这边通过监听摁下松开事件来多上了一层锁,这样更加的安全和高效。

下面是我的效果演示,实际开发中可根据自己的用途来修改代码

到此这篇关于h5封装下拉刷新的文章就介绍到这了,更多相关h5下拉刷新内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

最新信息
前端在工作当中难免会于原生的安卓和ios合作,去做一些H5嵌套的页... [详细]
文件选择域<input type="file">也是 CSS 啃不动的一块骨头,如果... [详细]
举个例子<title>淘宝网 - 淘!我喜欢</title>使用description以及k... [详细]
此处闪现场景是,修改和新增用的一个js方法,最终都调用$('#modalRo... [详细]
HitmanPro是一款可以帮助用户们快速查找电脑中的病毒并删除的软... [详细]
安装了360之后,任务栏左边会出现一个搜索框,有些小伙伴会觉得用着... [详细]
腾讯电脑管家是一款非常好用的电脑安全管理软件,管家功能强大,还能... [详细]
腾讯电脑管家是一款功能强大的电脑安全防护软件,许多用户都安装了... [详细]
腾讯电脑管家是一款非常好用的电脑安全防护软件,它能在我们上网的... [详细]
AutoCAD2015是一款非常专业的制图软件,那有很多用户表示自己不知... [详细]