十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍了html5如何封装下拉刷新,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
莆田网站建设公司成都创新互联,莆田网站设计制作,有大型网站制作公司丰富经验。已为莆田1000+提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱,请找那个售后服务好的莆田做网站的公司定做!
前端在工作当中难免会于原生的安卓和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);} }下拉刷新
整个代码的思想不是简单意义上的根据滚动长度和实际高度做判断,以为开头说过ios这方面会有弹簧的一个特性,所以不能这么判断,我这边通过监听摁下松开事件来多上了一层锁,这样更加的安全和高效。
下面是我的效果演示,实际开发中可根据自己的用途来修改代码
感谢你能够认真阅读完这篇文章,希望小编分享的“html5如何封装下拉刷新”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!