原生js简单模拟移动端下拉刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {}
</style>
</head>
<body>
<div class="container">
<div>Lorem, ipsum.</div>
<div>Corrupti, blanditiis.</div>
<div>Rerum, quisquam.</div>
<div>Sed, velit!</div>
<div>Numquam, natus.</div>
<div>Deleniti, laudantium?</div>
<div>Nulla, expedita.</div>
<div>Cumque, praesentium.</div>
<div>Nisi, impedit.</div>
<div>Odio, facere.</div>
<div>Cumque, facilis!</div>
<div>Cumque, id?</div>
<div>Veniam, cum!</div>
<div>Quidem, aut.</div>
<div>Modi, alias.</div>
<div>Dolor, omnis?</div>
<div>Omnis, a!</div>
<div>Illum, voluptatum!</div>
<div>Doloremque, autem.</div>
<div>Corporis, reiciendis!</div>
<div>Magni, blanditiis.</div>
<div>Consequatur, quo.</div>
<div>Magni, velit!</div>
<div>Nobis, odit!</div>
<div>Dignissimos, provident.</div>
<div>Ex, nulla.</div>
<div>Iure, necessitatibus.</div>
<div>Rerum, soluta.</div>
<div>Eaque, placeat?</div>
<div>Quaerat, veniam.</div>
<div>Iure, non.</div>
<div>Consequuntur, harum!</div>
<div>Veritatis, sequi!</div>
<div>Voluptates, neque!</div>
<div>Quidem, maiores.</div>
<div>Non, quisquam.</div>
<div>Officia, temporibus.</div>
<div>Velit, sapiente!</div>
<div>Ab, suscipit.</div>
<div>Repellendus, sequi!</div>
<div>Delectus, laudantium!</div>
<div>Nobis, commodi.</div>
<div>Laborum, necessitatibus.</div>
<div>Dolor, officia?</div>
<div>Impedit, numquam.</div>
<div>Similique, perferendis.</div>
<div>Maxime, corrupti!</div>
<div>Sequi, magni.</div>
<div>Voluptatibus, quo.</div>
<div>Eius, obcaecati!</div>
<div>Quasi, velit?</div>
<div>Assumenda, aperiam.</div>
<div>Dolorem, libero.</div>
<div>Dolor, mollitia.</div>
<div>At, voluptate?</div>
<div>Quas, atque.</div>
<div>Facere, qui.</div>
<div>Libero, at!</div>
<div>Unde, autem?</div>
<div>Libero, autem.</div>
<div>Incidunt, vero!</div>
<div>Eos, ex.</div>
<div>Perferendis, iusto!</div>
<div>Architecto, quae.</div>
<div>Voluptatem, asperiores.</div>
<div>Dicta, a.</div>
<div>Fuga, obcaecati!</div>
<div>Assumenda, asperiores!</div>
<div>Ea, explicabo?</div>
<div>Excepturi, ipsum!</div>
<div>Sint, est?</div>
<div>Quis, libero.</div>
<div>Soluta, sapiente.</div>
<div>Nobis, laborum?</div>
<div>Laborum, cumque.</div>
<div>Qui, doloribus.</div>
<div>Nostrum, numquam.</div>
<div>Corporis, asperiores?</div>
<div>Totam, nesciunt.</div>
<div>Nihil, dolores!</div>
<div>Eaque, sapiente.</div>
<div>Inventore, quis!</div>
<div>Nobis, dolorum?</div>
<div>Accusantium, saepe.</div>
<div>Eos, eveniet.</div>
<div>Sit, doloribus.</div>
<div>Odit, recusandae!</div>
<div>Nulla, neque!</div>
<div>Placeat, commodi!</div>
<div>Dolores, perferendis.</div>
<div>Nobis, dolorum.</div>
<div>Aut, eum?</div>
<div>Molestiae, soluta.</div>
<div>Obcaecati, magnam!</div>
<div>Laboriosam, ducimus.</div>
<div>Veritatis, nihil!</div>
<div>Corrupti, explicabo?</div>
<div>Impedit, molestiae.</div>
<div>Nemo, non.</div>
<div>Nostrum, deleniti.</div>
<div>Soluta, iste.</div>
<div>Natus, illo.</div>
<div>Illo, amet!</div>
<div>Culpa, nostrum.</div>
<div>Eum, dolor.</div>
<div>Accusamus, facere?</div>
<div>Porro, facere!</div>
<div>Quaerat, quisquam.</div>
<div>Perferendis, excepturi.</div>
<div>Amet, minima!</div>
<div>Laudantium, veritatis.</div>
<div>Laudantium, nostrum!</div>
<div>Deleniti, ullam.</div>
<div>Natus, doloribus.</div>
<div>Doloribus, quos?</div>
<div>Dolore, autem!</div>
<div>Dolore, excepturi!</div>
<div>Officiis, ratione.</div>
<div>Magnam, blanditiis.</div>
<div>Pariatur, id.</div>
<div>Accusamus, explicabo.</div>
<div>Unde, dignissimos.</div>
<div>Similique, vitae?</div>
<div>Quibusdam, accusantium.</div>
<div>Quod, explicabo.</div>
<div>Consequatur, ab.</div>
<div>Ullam, consequatur.</div>
<div>Dignissimos, ad.</div>
<div>Natus, delectus?</div>
<div>Dicta, voluptas.</div>
<div>Nemo, dicta!</div>
<div>Sequi, nostrum!</div>
<div>Repellendus, similique!</div>
<div>Dicta, accusamus.</div>
<div>Soluta, a.</div>
<div>Perferendis, omnis!</div>
<div>Odit, modi!</div>
<div>Dignissimos, quidem!</div>
<div>Quam, delectus!</div>
<div>Non, unde.</div>
<div>Libero, dolorem.</div>
<div>Officiis, tenetur.</div>
<div>Commodi, et!</div>
<div>Iure, numquam?</div>
<div>Repellendus, quae.</div>
<div>Mollitia, quidem!</div>
<div>Iste, a?</div>
<div>Corrupti, nulla.</div>
<div>Minus, officia?</div>
<div>Nobis, eaque?</div>
<div>Officiis, atque!</div>
<div>Sit, quas.</div>
<div>Culpa, eos?</div>
<div>Eos, sit!</div>
<div>Maxime, expedita!</div>
<div>Incidunt, animi!</div>
<div>Quidem, vero.</div>
<div>Distinctio, deleniti?</div>
<div>Doloremque, laboriosam?</div>
<div>Error, consectetur.</div>
<div>Magnam, alias!</div>
<div>Quo, ipsam?</div>
<div>Adipisci, vero.</div>
<div>Dolorum, animi!</div>
<div>Rem, ea!</div>
<div>A, consequuntur.</div>
<div>Itaque, ex!</div>
<div>Soluta, fugit.</div>
<div>Ducimus, laboriosam?</div>
<div>Autem, a?</div>
<div>Tenetur, incidunt.</div>
<div>Quaerat, suscipit.</div>
<div>Illo, odit.</div>
<div>Autem, accusamus!</div>
<div>Impedit, ex.</div>
<div>Aliquid, nesciunt?</div>
<div>Illo, delectus!</div>
<div>Iure, error.</div>
<div>Excepturi, quo.</div>
<div>Obcaecati, architecto.</div>
<div>Iste, facere.</div>
<div>Placeat, quis.</div>
<div>Optio, voluptates?</div>
<div>Porro, aliquid!</div>
<div>Tempora, commodi!</div>
<div>Nobis, ducimus.</div>
<div>Vel, modi.</div>
<div>Magnam, id.</div>
<div>Magnam, quam.</div>
<div>Odit, deleniti.</div>
<div>Perspiciatis, nulla.</div>
<div>Beatae, enim!</div>
<div>Error, exercitationem!</div>
<div>Unde, nisi!</div>
<div>Sit, sunt?</div>
<div>Iure, eaque!</div>
<div>Magnam, est!</div>
<div>Dolore, exercitationem?</div>
<div>Magnam, debitis!</div>
<div>Aperiam, quae.</div>
</div>
<script>
const container = document.querySelector('.container')
let start = 0
let end = 0
window.addEventListener('touchstart', ev => {
const scrollFrom = document.documentElement.scrollTop
if (!scrollFrom) {
start = ev.touches[0].pageY
}
})
window.addEventListener('touchmove', ev => {
// 开始拖拽的时候,页面滚动距离
const scrollFrom = document.documentElement.scrollTop
if (!scrollFrom) {
end = ev.touches[0].pageY
if (start < end) {
const move = end - start > 100 ? 100 : end - start
container.style = `transform: translateY(${move}px)`
}
}
})
window.addEventListener('touchend', ev => {
// 开始拖拽的时候,页面滚动距离
container.style = 'transform: translateY(0px);transition: transform .14s;'
if (end - start > 80) {
console.log('上拉加载触发了...')
}
})
</script>
</body>
</html>
本想把生活活成一首诗, 时而优雅 , 时而豪放 , 结果活成了一首歌 , 时而不靠谱 , 时而不着调
浙公网安备 33010602011771号