h5封装下拉刷新

浩仔谈梦

前端在工作当中难免会于原生的安卓和ios合作，去做一些H5嵌套的页面。但是实际开发中常常会遇到各种兼容问题，具体问题我就不一一列举了，这次我主要分享的是关于在原生中下拉刷新中双系统出现的兼容问题，最典型的就是在ios中会出现下拉弹簧这会大大增加前端在开发中遇到的奇特问题，所以本文结合实际，对此做些功能上的实现，也希望大家可以看过我实现原理后理解并运用到实际的开发过程中，真正做到举一反三，货不多说直接上代码。
首页css+html部分

1. *{
   
2.             margin: 0;
   
3.             padding: 0;
   
4.             list-style: none;
   
5.         }
   
6.     body{
   
7.             display: flex;
   
8.             justify-content: center;
   
9.             align-items: center;
   
10.         }
    
11.     .one{
    
12.         width : 4rem;
    
13.         height: 7rem;
    
14.         border: 1px solid red;
    
15.         font-size: 0.35rem;
    
16.         box-sizing: border-box;
    
17.         overflow-y: auto;
    
18.        }
    
19.     .kl{
    
20.         position: relative;
    
21.        }
    
22.     .lis{
    
23.         width: 100%;
    
24.         height: 1rem;
    
25.         line-height: 1rem;
    
26.         text-align: center;
    
27.         background: red;
    
28.       }
    
29.     .lis:nth-child(2n+1){
    
30.     background: pink;
    
31.       }
    
32.     .scroll{
    
33.         height:100%;
    
34.         overflow: auto;
    
35.         -webkit-overflow-scrolling: touch;
    
36.         }
    
37.     .di{
    
38.     position: relative;
    
39.     color: #c8c9cc;
    
40.     font-size: 0;
    
41.     vertical-align: middle;
    
42.     }
    
43.     .k{
    
44.     width: 0.5rem;
    
45.     height: 0.5rem;
    
46.     display: inline-block;
    
47.     max-width: 100%;
    
48.     max-height: 100%;
    
49.     animation: theanimation 1s linear infinite;
    
50.     }
    
51.     .us{
    
52.     position: absolute;
    
53.     top: 0;
    
54.     left: 0;
    
55.     width: 100%;
    
56.     height: 100%;
    
57.    color:rgb(25, 137, 250)
    
58.     }
    
59.     .us:before{
    
60.     display: block;
    
61.     width: 2px;
    
62.     height: 25%;
    
63.     margin: 0 auto;
    
64.     background-color: currentColor;
    
65.     border-radius: 40%;
    
66.     content: ' ';
    
67.     }
    
68.     .us:nth-child(1){
    
69.     -webkit-transform: rotate(30deg);
    
70.     transform: rotate(30deg);
    
71.     opacity: 1;
    
72.     }
    
73.     .us:nth-child(2){
    
74.     -webkit-transform: rotate(60deg);
    
75.     transform: rotate(60deg);
    
76.     opacity: 0.9375;
    
77.     }
    
78.     .us:nth-child(3){
    
79.         -webkit-transform: rotate(90deg);
    
80.     transform: rotate(90deg);
    
81.     opacity: 0.875;
    
82.     }
    
83.     .us:nth-child(4){
    
84.     -webkit-transform: rotate(120deg);
    
85.     transform: rotate(120deg);
    
86.     opacity: 0.8125;
    
87.     }
    
88.     .us:nth-child(5){
    
89.         -webkit-transform: rotate(150deg);
    
90.     transform: rotate(150deg);
    
91.     opacity: 0.75;
    
92.     }
    
93.     .us:nth-child(6){
    
94.         -webkit-transform: rotate(180deg);
    
95.     transform: rotate(180deg);
    
96.     opacity: 0.6875;
    
97.     }
    
98.     .us:nth-child(7){
    
99.         -webkit-transform: rotate(210deg);
    
100.     transform: rotate(210deg);
     
101.     opacity: 0.625;
     
102.     }
     
103.     .us:nth-child(8){
     
104.     -webkit-transform: rotate(240deg);
     
105.     transform: rotate(240deg);
     
106.     opacity: 0.5625;
     
107.     }
     
108.     .us:nth-child(9){
     
109.         -webkit-transform: rotate(270deg);
     
110.     transform: rotate(270deg);
     
111.     opacity: 0.5;
     
112.     }
     
113.     .us:nth-child(10){
     
114.         -webkit-transform: rotate(300deg);
     
115.     transform: rotate(300deg);
     
116.     opacity: 0.4375;
     
117.     }
     
118.     .us:nth-child(11){
     
119.     -webkit-transform: rotate(330deg);
     
120.     transform: rotate(330deg);
     
121.     opacity: 0.375;
     
122.     }
     
123.     .us:nth-child(12){
     
124.          -webkit-transform: rotate(360deg);
     
125.     transform: rotate(360deg);
     
126.     opacity: 0.3125;
     
127.     }
     
128.     @keyframes theanimation{
     
129.   from {   transform: rotate(0deg);}
     
130.     to { transform: rotate(360deg);}
     
131.      } <!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>       
     
132.         </div>
     
133. </body>       
     
134. <script type="text/javascript" src="适配.js">
     
135. </script>       
     
136. <script type="text/javascript" src="下拉刷新.js">
     
137. </script>
     
138. </html>

复制代码

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

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

1. window.loading = function() {
   
2.     var sin = 0;
   
3.     var sel = null; //計時器
   
4.     var br = true; //判斷是否請求完所有的數據
   
5.     var bl = true; //判斷是否ios an
   
6.     var all_H; //下拉高度
   
7.     var xl_xu, sl_xu; //下拉選和上拉選
   
8.     var str;
   
9.     let box = document.getElementsByClassName('one')[0] //獲取到整個的body
   
10.     let box_childer = document.getElementsByClassName('kl')[0]
    
11.     let li = document.querySelectorAll('li') //所有的li
    
12.     box.addEventListener('touchstart', start) //摁下事件
    
13.     box.addEventListener('scroll', (e) => scrol(e)) //移動事件
    
14.     box.addEventListener('touchend', end) //摁下離開事件
    
15.     //    box.addEventListener('touchmove',move_lin)//拖拽事件
    
16.     function scrol(e) { //滾動事件
    
17.         let move_scroll = br && bl ? e.target.scrollTop : NaN
    
18.         all_H = box.clientHeight + move_scroll
    
19.         if(all_H >= e.target.scrollHeight) { //觸底了
    
20.             bl = false
    
21.             if(sin ^ 3) {
    
22.                 ++sin
    
23.             } else {
    
24.                 if(xl_xu) {
    
25.                     return
    
26.                 }
    
27.                 establish(2)
    
28.                 return false
    
29.             }
    
30.             br = false
    
31.             //創建一個節點來顯示所示內容
    
32.             establish();
    
33.         }
    
34.     }
    
35.     function end() { //鼠標離開事件
    
36.         bl = true
    
37.     }
    
38.     function start(e) { //摁下事件
    
39.         bl = true
    
40.     }
    
41.     function establish(a = 0) { //創建dom加載元素
    
42.         if(a == 2) { //說明是最後一頁
    
43.             xl_xu = document.createElement('div');
    
44.             xl_xu.style.textAlign = 'center'
    
45.             xl_xu.innerHTML = '已經最後一頁了'
    
46.             box_childer.appendChild(xl_xu)
    
47.             return
    
48.         }
    
49.         if(xl_xu) { //說明有 那就先刪除
    
50.             box_childer.removeChild(xl_xu)
    
51.         }
    
52.         xl_xu = document.createElement('div')
    
53.         xl_xu.style.textAlign = 'center'
    
54.         xl_xu.innerHTML = str
    
55.         box_childer.appendChild(xl_xu)
    
56.         sel = setTimeout(() => {
    
57.             box_childer.removeChild(xl_xu)
    
58.             xl_xu = null
    
59.             clearTimeout(sel);
    
60.             let a = Array.from({length: 5}, _ =>document.createElement('li'))
    
61.             for(let i = 0;i<a.length; i++)    {
    
62.                 a[i].classList.add('lis')
    
63.                 box_childer.appendChild(a[i])
    
64.                 }
    
65.             sel = null
    
66.             br = true
    
67.         }, 1500)
    
68.     }
    
69. 
    
70.     function move_lin(e) { //托轉事件
    
71.         if(!br) {
    
72.             var eve = e || event
    
73.             var touch = eve.touches[0]
    
74.             var clientW = box.scrollWidth;
    
75.             var clientH = box.clientHeight
    
76.             var start_y = (750 / clientW) * (touch.pageY) / 75 //距离当前页面的高度
    
77.             var start_x = (750 / clientW) * (touch.pageX) / 75 //距离当前页面的宽度
    
78.             console.log(start_y, start_x)
    
79.         }
    
80. 
    
81.         //        console.log('托轉了',box_childer,all_H)
    
82.     }
    
83.     (function() {
    
84.         str =`<div class="di"'>
    
85.                 <div class="k">
    
86.             <li class="us"></li>
    
87.             <li class="us"></li>
    
88.             <li class="us"></li>
    
89.             <li class="us"></li>
    
90.             <li class="us"></li>
    
91.             <li class="us"></li>             这里我写了一个下拉刷新的deom
    
92.             <li class="us"></li>
    
93.             <li class="us"></li>
    
94.             <li class="us"></li>
    
95.             <li class="us"></li>
    
96.             <li class="us"></li>
    
97.             <li class="us"></li>
    
98.             </div></div>`
    
99.     })()
    
100. }()

复制代码

整个代码的思想不是简单意义上的根据滚动长度和实际高度做判断，以为开头说过ios这方面会有弹簧的一个特性，所以不能这么判断，我这边通过监听摁下松开事件来多上了一层锁，这样更加的安全和高效。
下面是我的效果演示，实际开发中可根据自己的用途来修改代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

爱笑的阳光2024

嘎嘎嘎嘎嘎嘎嘎

诸葛亮

已测试，非常不错

cprote

这个话题很有趣，我想多了解一些

李家脆皮肠

已测试，非常不错

素颜霜01

我们一起努力，共同解决问题吧。

顾北○

能给个链接吗？我想深入了解一下。

小明1987

牛逼

时团顶针

6666666666

闪闪的红星

我不确定这个信息的准确性，请再确认一下