首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

h5封装下拉刷新

Posted in HTML / CSS onAugust 25, 2020

前端在工作当中难免会于原生的安卓和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" src="适配.js">
</script>	
<script type="text/javascript" src="下拉刷新.js">
</script>
</html>

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

h5封装下拉刷新

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

window.loading = function() {
    var sin = 0;
    var sel = null; //??r器
    var br = true; //判?嗍欠裾?求完所有的??
    var bl = true; //判?嗍欠?os 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) { //?L?邮录
        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() { //鼠?穗x?事件
        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) { //?明有 那就先?h除
            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这方面会有弹簧的一个特性，所以不能这么判断，我这边通过监听摁下松开事件来多上了一层锁，这样更加的安全和高效。

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

h5封装下拉刷新

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

h5封装下拉刷新

- Author -

熊叔叔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 #HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 #HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 #HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 #HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 #HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 #HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 #HTML / CSS
再生机(1) PL-365(1) TECSUN(1) 海燕B411(1) 接收机(2) 修复(2) 德生(17) 车机(1) 电子管(5) 东方红(1)
You might like
德生BCL3000的电路分析和打磨
2021/03/02 无线电
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php生成图形（Libchart）实例
2013/11/06 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
Python 编码处理-str与Unicode的区别
2016/09/06 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
手把手教你从PyCharm安装到激活（最新激活码），亲测有效可激活至2089年
2020/11/25 Python
CSS3 渐变（Gradients）之CSS3 径向渐变
2016/07/08 HTML / CSS
Banggood官网：面向全球客户的综合商城
2017/04/19 全球购物
英国领先的独立酒精饮料零售商：DrinkSupermarket
2021/01/13 全球购物
行政专员岗位职责说明书
2014/09/01 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
超市主管竞聘书
2015/09/15 职场文书
礼仪培训心得体会
2016/01/22 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
十大最强电系宝可梦，阿尔宙斯电系之一，第七被称为雷神
2022/03/18 日漫