jquery之移动端下拉刷新，上拉加载更多。

清疚 2022-01-31 04:53 2395阅读 0赞

### jquery的下拉刷新，上拉加载 ###

*   *   *   *  一、下拉刷新
             *  二、上拉加载更多

#### 一、下拉刷新 ####

> 思路：  
> 1。在想要显示刷新提示的地方，放一个嵌套盒子，子盒子相对父盒子相对定位，父盒子高度默认为0，子盒子高度固定。  
> 2。利用手指滑动事件，touchstart、touchmove、touchend。  
> 3。数据是模拟的，注意每次调用函数清除定时器。

//html
     <div id="pull-down" class="pull-down">
           <div class="pull-down-content">松手加载更多</div>
         </div>
          <ul id="newlist">
            <li>
              <h2>告诉孩子：努力不苦，不努力的人生才苦！（深度好文）</h2>
              <div class="img-box">
                <div class="img"> <img src="./img/05.jpg" alt=""></div>
                <div class="img"> <img src="./img/05.jpg" alt=""></div>
                <div class="img"> <img src="./img/05.jpg" alt=""></div>
              </div>
              <div class="tips">
                <span>9999阅读</span>
                <span>美文</span>
              </div>
            </li>
          </ul>

/*css*/
     .pull-down{ 
        position:relative;overflow:hidden;height:0;
        max-height: 60px;
    }
    .pull-down-content{ 
        position:absolute;bottom:0;
        text-align: center;
        line-height: 30px;
        color: #999;
        width: 100%;
    }

$(function(){ 
     		//分别设置滑动距离，开始位置，结束位置，和模拟数据的定时器
            let disY, startY, endY,timer,t;
           
             // 触摸开始
             $('#newlist').on('touchstart',function(e){ 
               startY = e.originalEvent.changedTouches[0].pageY;//开始时的坐标
               
             });
            // 移动中
            $('#newlist').on('touchmove',function(e){ 
                endY = e.originalEvent.changedTouches[0].pageY;
                disY = endY- startY;//移动后的坐标减去开始坐标，滑动距离。
                if(disY < 60){ 
                  $('#pull-down').css({ 
                  height:disY+'px';//父盒子的高度随着滑动距离变化，有最大值。
                });
                }else{ 
                  $('#pull-down').css({ 
                  height:60+'px';//父盒子的最大高度
                });
                }
            });
            // 结束时
            $('#newlist').on('touchend',function(e){ 
              clearInterval(timer);
              endY = e.originalEvent.changedTouches[0].pageY;
              disY = endY-startY;
              if(disY>30){ 
                 timer=setInterval(function(){ 
                  disY-=5;
                  if(disY<=30){ 
                    $('#pull-down').css({ 
                  height:30+'px'//松手后的返回。
                });
                clearInterval(timer);
                refresh();//加载数据
                  }
                  $('#pull-down').css({ 
                  height:disY+'px'
                });
                },100)
              }
            })
            // 请求数据
            function refresh(){ 
              clearTimeout(t);
               t =setTimeout(function(){ //延时器模拟的数据请求
                for (let i = 0; i < data.length; i++) { 
                    console.log(data[i]);
                    list +=
                        ` <li> <h2>${ data[i].title}</h2> <div class="img-box"> <div class="img"> <img src="${ data[i].images[0]}" alt=""></div> <div class="img"> <img src="${ data[i].images[1]}" alt=""></div> <div class="img"> <img src="${ data[i].images[2]}" alt=""></div> </div> <div class="tips"> <span>${ data[i].views}阅读</span> <span>${ data[i].category}</span> </div> </li> `
                }
                $('#newlist').append(list);
                $('#pull-down').css({ 
                  height:0
                });
                clearTimeout(t);//定时器技术时候要记得清除，每次调用事件之前，最好也清除下。
              },3000);
            
            }
          })

#### 二、上拉加载更多 ####

> 思路：  
> 1。主要是监听的浏览器滚动事件，看自己需求  
> 2。比较简单，做的是上拉无限加载，加载条数，加载提示，触发开关没设置，看自己需求。

$(function(){ 
          //获取滚动条当前的位置
        function getScrollTop() { 
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) { 
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) { 
                scrollTop = document.body.scrollTop;
            }
            return scrollTop;
        }
     
        //获取当前可视范围的高度
        function getClientHeight() { 
            var clientHeight = 0;
            if (document.body.clientHeight && document.documentElement.clientHeight) { 
                clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
            } else { 
                clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
            }
            return clientHeight;
        }
     
        //获取文档完整的高度
        function getScrollHeight() { 
            return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        }
     
        //滚动事件触发
        window.onscroll = function () { 
            if (getScrollTop() + getClientHeight() === getScrollHeight()) { 
              for (let i = 0; i < data.length; i++) { 
                    console.log(data[i]);
                    list +=
                        ` <li> <h2>${ data[i].title}</h2> <div class="img-box"> <div class="img"> <img src="${ data[i].images[0]}" alt=""></div> <div class="img"> <img src="${ data[i].images[1]}" alt=""></div> <div class="img"> <img src="${ data[i].images[2]}" alt=""></div> </div> <div class="tips"> <span>${ data[i].views}阅读</span> <span>${ data[i].category}</span> </div> </li> `
                }
                $('#newlist').append(list);
            }
        };
        })