您现在的位置是：网站首页> 编程资料编程资料

h5封装下拉刷新

2023-10-11 334人已围观

简介这篇文章主要介绍了h5封装下拉刷新，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前端在工作当中难免会于原生的安卓和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);} } 下拉刷新这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容

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

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

 window.loading = function() { var sin = 0; var sel = null; //

上一篇：amazeui页面分析之登录页面的示例代码HTML+CSS实现动态背景登录页面Html制作简单而漂亮的登录页面Div+CSS仿支付宝登录页面Div+CSS仿微信公众平台登录页面如何布局登录页面使用css样式设计一个简单的html登陆界面的实现

下一篇：Amaze UI 文件选择域的示例代码amazeui 验证按钮扩展的实现前后端结合实现amazeUI分页效果AmazeUI 加载进度条的实现示例AmazeUI折叠式卡片布局，整合内容列表、表格组件实现amaze ui 的使用详细教程AmazeUI中模态框的实现

您现在的位置是：网站首页> 编程资料编程资料

h5封装下拉刷新

相关内容

点击排行

本栏推荐

猜你喜欢