原生JS实现下拉刷新（移动端）
主要利用touchstart、touchmove、touchend事件结合CSS定位<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>* {padding: 0;margin: 0;}.box {position: absolute;top: 0;left: 0;height: 100%;width: 100%;}.list {position: relative;top: 0;width: 100%;}.list li {list-style-type: none;width: 100%;height: 35px;line-height: 35px;text-align: center;}</style><body><div class="box"><ul class="list"><li>1111</li><li>2222</li><li>3333</li><li>4444</li></ul></div><script>/* e.touches： touchlist触摸点列表, 存储着触摸点对象touch*/const box = document.querySelector('.box')const list = document.querySelector('.list')// 按下屏幕的位置let touchStartPosition = 0// touchstart事件box.addEventListener('touchstart', function (e) {let touch = e.touches[0]touchStartPosition = touch.pageY// console.log(touchStartPosition)})// touchmove事件box.addEventListener('touchmove', function (e) {let touch = e.touches[0]// 列表的top值等于列表相对于box的偏移量+滑动的距离list.style.top = list.offsetTop + touch.pageY - touchStartPosition + 'px'// 实现平滑的滑动touchStartPosition = touch.pageY})// touchend事件box.addEventListener('touchend', function (e) {let top = list.offsetTopif (top > 70) {// 在此处调用刷新后的回调console.log('刷新')} if (top > 0) {// 通过定时器平滑的将list的top = 0let timer = setInterval(() => {list.style.top = top-- + 'px'if (top <= 0) {clearInterval(timer)}})}})</script></body></html>
