h5封裝⊙^⊙往下拉更新

日期:2021-03-23 类型:科技新闻 

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,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);} 
     } <!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>

这儿是仿真模拟了一个简易的往下拉更新的模版。

接下去是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('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>`
    })()
}()

全部编码的观念并不是简易实际意义上的依据翻转长短和具体高宽比做分辨,认为开始说过ios这些方面会出现弹黄的一个特点,因此不可以那么分辨,我这里根据监视摁下松掉恶性事件来多到了一层锁,那样更为的安全性和高效率。

下边就是我的实际效果演试,具体开发设计中可依据自身的主要用途来改动编码

到此这篇有关h5封裝往下拉更新的文章内容就详细介绍到这了,大量有关h5往下拉更新內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!