原生js下拉刷新和上拉刷新

古城微笑少年丶 2022-12-05 15:25 186阅读 0赞

参考来源：[https://www.cnblogs.com/panyujun/p/11972872.html][https_www.cnblogs.com_panyujun_p_11972872.html]

我这里不需要上拉加载更多，而是同时需要**上拉刷新**，所以做了点修改：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>原生js下拉刷新和上拉刷新</title>
            <style>
                ul {
                    margin: 0px;
                    padding: 0px;
                    list-style: none;
                }
    
                li {
                    width: 100%;
                    height: 80px;
                    line-height: 80px;
                    background: white;
                    border: solid 1px blue;
                    font-size: 12px;
                }
    
                .refresh-loading {
                    height: 0px;
                    overflow: hidden;
                    background-color: blue;
                }
    
                .refresh-txt {
                    color: white;
                    text-align: center;
                    font-size: 14px;
                }
            </style>
        </head>
    
        <body>
            <div class="content" id="content">
                <div class="refresh-loading">
                    <p class="refresh-txt">下拉可刷新</p>
                </div>
                <ul class="scrollview" id="scrollview"></ul>
                <div class="refresh-loading">
                    <p class="refresh-txt">上拉可刷新</p>
                </div>
            </div>
    
            <script>
                const screenHeight = window.screen.height;
    
                const moveEle = document.getElementById('content');
    
                moveEle.style.height = screenHeight + 'px';
    
                const scrollView = document.getElementById('scrollview'); // 真正的内容
    
                const refreshLoadingArr = document.getElementsByClassName('refresh-loading'); // 刷新的loading
                const refreshTxtArr = document.getElementsByClassName('refresh-txt'); // 刷新显示的提示文字
    
                const refreshEleTop = refreshLoadingArr[0];
                const refreshTxtEleTop = refreshTxtArr[0];
                const refreshEleBottom = refreshLoadingArr[1];
                const refreshTxtEleBottom = refreshTxtArr[1];
    
                let refreshEle = refreshEleTop;
                let refreshTxtEle = refreshTxtEleTop;
                let refreshType = 1; // 大于0上拉 小于0下拉
    
                let touch,
                    moved,
                    startY,
                    diff,
                    moveDiff = 60,
                    pagePull = true;
    
                moveEle.addEventListener(
                    'touchstart',
                    e => {
                        touch = true; //触摸开始
                        moved = false; //还没有进行下拉刷新的滑动
                        startY = e.touches[0].clientY; //记录当前手指在屏幕上的纵向坐标，用于判断页面是上滑还是下滑
                    },
                    false,
                );
    
                moveEle.addEventListener(
                    'touchmove',
                    e => {
                        if (!touch || !pagePull) {
                            return;
                        }
    
                        let touchesDiff = e.touches[0].clientY - startY; //计算的移动位移
    
                        // touchesDiff 小于0表示 上拉刷新
                        refreshType = touchesDiff;
                        refreshEle = touchesDiff < 0 ? refreshEleBottom : refreshEleTop;
                        refreshTxtEle = touchesDiff < 0 ? refreshTxtEleBottom : refreshTxtEleTop;
    
                        touchesDiff = touchesDiff < 0 ? -touchesDiff : touchesDiff;
    
                        moved = true;
                        diff = touchesDiff;
                        let distance = 0;
                        if (diff <= moveDiff) {
                            //moveDiff至少要等于loading的高度
                            //当滑动小于规定的临界值时
                            distance = diff;
                            refreshTxtEle.innerHTML = refreshType > 0 ? '下拉可刷新' : '上拉可刷新';
                        } else {
                            refreshTxtEle.innerHTML = '释放可刷新';
                            //弹性
                            if (touchesDiff <= 2 * moveDiff) {
                                distance = moveDiff + 0.5 * (touchesDiff - moveDiff);
                            } else {
                                distance = moveDiff + 0.1 * (touchesDiff - moveDiff) + 0.05 * (touchesDiff - 2 * moveDiff);
                            }
                        }
                        if (distance > 0) {
                            //滑动的距离
                            css(refreshEle, 0);
                            refreshEle.style.height = distance + 'px';
                        }
                    },
                    false,
                );
    
                moveEle.addEventListener(
                    'touchend',
                    e => {
                        if (!touch || !moved) {
                            refreshEle.style.height = '0px';
                            return;
                        }
                        css(refreshEle, 300);
                        pagePull = false;
                        if (diff > moveDiff) {
                            refreshTxtEle.innerHTML = '刷新中';
                            refreshEle.style.height = moveDiff + 'px';
                            setTimeout(() => {
                                //延迟模拟接口调用
                                loadData();
                                css(refreshEle, 300);
                                refreshEle.style.height = '0px';
                                setTimeout(() => {
                                    pagePull = true; //控制在刷新期间，重复向下拉动，不做任何操作
                                }, 300);
                                refreshTxtEle.innerHTML = '完成刷新';
                            }, 1500);
                        } else {
                            pagePull = true;
                            refreshEle.style.height = '0px';
                        }
                    },
                    false,
                );
    
                function css(ele, t) {
                    ele.style.transition = 'all ' + t + 'ms';
                    ele.style.webkitTransition = 'all ' + t + 'ms';
                }
    
                // 模拟数据
                function loadData() {
                    let childNodes = scrollView.children;
                    for (let j = childNodes.length - 1; j >= 0; j--) {
                        scrollView.removeChild(childNodes[j]);
                    }
                    let text =
                        refreshType > 0 ? '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。' : '技术是开发它的人的共同灵魂。';
                    //假设每页11条数据
                    for (let i = 1; i < 11; i++) {
                        let li = document.createElement('li');
                        let index = i;
                        li.innerHTML = index + '、' + text;
                        scrollView.appendChild(li);
                    }
                }
                loadData();
            </script>
        </body>
    </html>

[https_www.cnblogs.com_panyujun_p_11972872.html]: https://www.cnblogs.com/panyujun/p/11972872.html