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);
        }
    };
    })