移动端上拉刷新下拉加载

最新推荐文章于 2022-04-20 11:36:40 发布

deepsearc

最新推荐文章于 2022-04-20 11:36:40 发布

阅读量161

点赞数

分类专栏： JS基础

本文链接：https://blog.csdn.net/qq_38103554/article/details/104811916

版权

JS基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>移动端上拉刷新、下拉加载</title>
    <style type="text/css">
        html,body,header,div,main,p,span,ul,li{ margin: 0; padding: 0; }
        #refreshContainer li{ background-color: #eee; margin-bottom: 1px; padding: 20px 10px; }
        .refreshText{ position: absolute; width: 100%; line-height: 50px; text-align: center; left: 0; top: 0; }
        .bot_refreshText{ line-height: 50px; text-align: center; }
    </style>
</head>
<body>
<main>
    <p class="refreshText"></p>
    <ul id="refreshContainer">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <p class="bot_refreshText"></p>
</main>
 
<!--上拉刷新-->
<script type="text/javascript">
    (function(window) {
        var _element = document.getElementById('refreshContainer'),
          _refreshText = document.querySelector('.refreshText'),
          _startPos = 0,
          _transitionHeight = 0;
        _element.addEventListener('touchstart', function(e) {
            console.log('初始位置：', e.touches[0].pageY);
            _startPos = e.touches[0].pageY;
            _element.style.position = 'relative';
            _element.style.transition = 'transform 0s';
        }, false);
         
        _element.addEventListener('touchmove', function(e) {
            console.log('当前位置：', e.touches[0].pageY);
            _transitionHeight = e.touches[0].pageY - _startPos;
             
            if (_transitionHeight > 0 && _transitionHeight < 60) {
                _refreshText.innerText = '下拉刷新';
                _element.style.transform = 'translateY('+_transitionHeight+'px)';
                if (_transitionHeight > 55) {
                  _refreshText.innerText = '释放更新';
                }
            }              
        }, false);
        _element.addEventListener('touchend', function(e) {
            _element.style.transition = 'transform 0.5s ease 1s';
            _element.style.transform = 'translateY(0px)';
            _refreshText.innerText = '更新中...';
            // todo...
        }, false);
    })(window);
</script>
 
<!--下拉加载-->
<script type="text/javascript">
(function(window) {
    // 获取当前滚动条的位置
    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);
    }
    var _text = document.querySelector('.bot_refreshText'),
    _container = document.getElementById('refreshContainer');
    var throttle = function(method, context){
          clearTimeout(method.tId);
          method.tId = setTimeout(function(){
            method.call(context);
          }, 300);
    }
    function fetchData() {
        setTimeout(function() {
            _container.insertAdjacentHTML('beforeend', '<li>new add...</li>');
        }, 1000);
    }
    window.onscroll = function() {
        if (getScrollTop() + getClientHeight() == getScrollHeight()) {
            _text.innerText = '加载中...';
            throttle(fetchData);
        }
    };
})(window);
</script>
</body>
</html>