h5封装下拉革新

2024-11-2 22:16| 发布者: 44f6fa4f5| 查看: 102| 评论: 0

摘要: 前端在工作当中难免会于原生的安卓和ios互助，去做一些H5嵌套的页面。但是现实开发中常常会碰到各种兼容问题，详细问题我就不逐一罗列了，这次我重要分享的是关于在原生中下拉革新中双体系出现的兼容问题，最范例的

前端在工作当中难免会于原生的安卓和ios互助，去做一些H5嵌套的页面。但是现实开发中常常会碰到各种兼容问题，详细问题我就不逐一罗列了，这次我重要分享的是关于在原生中下拉革新中双体系出现的兼容问题，最范例的就是在ios中会出现下拉弹簧这会大大增加前端在开发中碰到的奇特问题，以是本文团结现实，对此做些功能上的实现，也希望大家可以看过我实现原理后理解并运用到现实的开发过程中，真正做到闻一知十，货不多说直接上代码。

首页css+html部分

[code] *{ 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" src="适配.js"> </script> <script type="text/javascript" src="下拉革新.js"> </script> </html>[/code]

这里是模拟了一个简单的下拉革新的模板。

接下来是js部分也是最重要的部分

[code] 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>` })() }()[/code]

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

下面是我的效果演示，现实开发中可根据本身的用途来修改代码

到此这篇关于h5封装下拉革新的文章就先容到这了,更多相关h5下拉革新内容请搜刮脚本之家以前的文章或继续欣赏下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/742266.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：amazeui页面分析之登录页面的示例代码下一篇：Amaze UI 文件选择域的示例代码

账号		自动登录	找回密码
密码			立即注册

h5封装下拉革新

相关分类

站长推荐 /6