當(dāng)前位置：首頁(yè) >  站長(zhǎng) >  編程技術(shù) >  正文

h5封裝下拉刷新

 2020-10-19 11:15  來(lái)源： 腳本之家   我來(lái)投稿 撤稿糾錯(cuò)

　 域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

這篇文章主要介紹了h5封裝下拉刷新，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前端在工作當(dāng)中難免會(huì)于原生的安卓和ios合作，去做一些H5嵌套的頁(yè)面。但是實(shí)際開(kāi)發(fā)中常常會(huì)遇到各種兼容問(wèn)題，具體問(wèn)題我就不一一列舉了，這次我主要分享的是關(guān)于在原生中下拉刷新中雙系統(tǒng)出現(xiàn)的兼容問(wèn)題，最典型的就是在ios中會(huì)出現(xiàn)下拉彈簧這會(huì)大大增加前端在開(kāi)發(fā)中遇到的奇特問(wèn)題，所以本文結(jié)合實(shí)際，對(duì)此做些功能上的實(shí)現(xiàn)，也希望大家可以看過(guò)我實(shí)現(xiàn)原理后理解并運(yùn)用到實(shí)際的開(kāi)發(fā)過(guò)程中，真正做到舉一反三，貨不多說(shuō)直接上代碼。

首頁(yè)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">這是一個(gè)內(nèi)容</li>   <li class="lis">這是一個(gè)內(nèi)容</li>   <li class="lis">這是一個(gè)內(nèi)容</li>   <li class="lis">這是一個(gè)內(nèi)容</li>      <li class="lis">這是一個(gè)內(nèi)容</li>    <li class="lis">這是一個(gè)內(nèi)容</li>      <li class="lis">這是一個(gè)內(nèi)容</li>   <li class="lis">這是一個(gè)內(nèi)容</li>   <li class="lis">這是一個(gè)內(nèi)容</li>   <li class="lis">這是一個(gè)內(nèi)容</li>   <li class="lis">這是一個(gè)內(nèi)容</li>   </div> 
 </div>
</body> 
<script type="text/javascript" src="適配.js">
</script> 
<script type="text/javascript" src="下拉刷新.js">
</script>
</html>

這里是模擬了一個(gè)簡(jiǎn)單的下拉刷新的模板。

接下來(lái)是js部分也是最主要的部分

window.loading = function() {
    var sin = 0;
    var sel = null; //計(jì)時(shí)器
    var br = true; //判斷是否請(qǐng)求完所有的數(shù)據(jù)
    var bl = true; //判斷是否ios an
    var all_H; //下拉高度
    var xl_xu, sl_xu; //下拉選和上拉選
    var str;
    let box = document.getElementsByClassName('one')[0] //獲取到整個(gè)的body
    let box_childer = document.getElementsByClassName('kl')[0]
    let li = document.querySelectorAll('li') //所有的li
    box.addEventListener('touchstart', start) //摁下事件
    box.addEventListener('scroll', (e) => scrol(e)) //移動(dòng)事件
    box.addEventListener('touchend', end) //摁下離開(kāi)事件
    //    box.addEventListener('touchmove',move_lin)//拖拽事件
    function scrol(e) { //滾動(dòng)事件
        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
            //創(chuàng)建一個(gè)節(jié)點(diǎn)來(lái)顯示所示內(nèi)容
            establish();
        }
    }
    function end() { //鼠標(biāo)離開(kāi)事件
        bl = true
    }
    function start(e) { //摁下事件
        bl = true
    }
    function establish(a = 0) { //創(chuàng)建dom加載元素
        if(a == 2) { //說(shuō)明是最後一頁(yè)
            xl_xu = document.createElement('div');
            xl_xu.style.textAlign = 'center'
            xl_xu.innerHTML = '已經(jīng)最後一頁(yè)了'
            box_childer.appendChild(xl_xu)
            return
        }
        if(xl_xu) { //說(shuō)明有 那就先刪除
            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) { //托轉(zhuǎn)事件
        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 //距離當(dāng)前頁(yè)面的高度
            var start_x = (750 / clientW) * (touch.pageX) / 75 //距離當(dāng)前頁(yè)面的寬度
            console.log(start_y, start_x)
        }

        //        console.log('托轉(zhuǎn)了',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>             這里我寫(xiě)了一個(gè)下拉刷新的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>`
    })()
}()

整個(gè)代碼的思想不是簡(jiǎn)單意義上的根據(jù)滾動(dòng)長(zhǎng)度和實(shí)際高度做判斷，以為開(kāi)頭說(shuō)過(guò)ios這方面會(huì)有彈簧的一個(gè)特性，所以不能這么判斷，我這邊通過(guò)監(jiān)聽(tīng)摁下松開(kāi)事件來(lái)多上了一層鎖，這樣更加的安全和高效。

下面是我的效果演示，實(shí)際開(kāi)發(fā)中可根據(jù)自己的用途來(lái)修改代碼

到此這篇關(guān)于h5封裝下拉刷新的文章就介紹到這了,更多相關(guān)h5下拉刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

來(lái)源：腳本之家

鏈接：https://www.jb51.net/html5/742266.html

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！

相關(guān)文章

加載更多

熱門(mén)排行

信息推薦