js 实现下拉刷新

js 部分，部分用jq代替
let state = undefined // start | moving | end
let touchStartY = undefined;
let touchTrigger = 100;
let dist = 0
const tip = $('#tip-wrap')
const tipmsg = document.querySelector('#tip')
const wrap = document.querySelector('#wrap')

window.addEventListener('touchstart', (e) => {
    // console.log('touchstart', e.touches)

    if (!window.scrollY)
        touchStartY = e.touches[0].screenY;
    state = 'start'
}, false)
var timer;

window.addEventListener('touchmove', (e) => {
    const screenY = e.touches[0].screenY
    if (state === 'start') {
        touchStartY = screenY
        state = 'moving'
    }
    dist = screenY - touchStartY

    if (dist > 0) {
        $('#tip-wrap').css('height', '80');
        $('#tip').html('正在刷新')
    }

}, {passive: false})
var timer;
window.addEventListener('touchend', (e) => {
    console.log('touchend', e.touches)
    clearTimeout(timer)
    timer = setTimeout(() => {
//给个时间来避免误碰
        if (dist >= 50 && !window.scrollY) {
            console.log('111')
        }
        touchStartY = 0
    }, 1000)
    $('#tip-wrap').css('height', '0');

}, false)

css 部分，这块按自己想法来

#tip-wrap {
    height: 0;
    overflow: hidden;
    text-align: center;
    background-color: #ccc;
    font-size: 0.9rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    pointer-events: none;
    transition: min-height 0.2s ease;
}

html 部分，给个架子搭起来
<div id="tip-wrap">
    <div id="tip">松开刷新</div>
</div>