# 移动端手写下拉刷新
# codepen
F12 开启浏览器手机模拟器，在顶部鼠标按住移动
# 思路
- 使用
touchstart、touchmove、touchend三个事件来监听触摸事件 - 使用
getBoundingClientRect()API 来判断当前 dom 是否在顶部(之前使用document.body.scrollTop并不行，然而搜到的都是这个答案。) - 最后一个是根据事件传递进来的参数用以计算距离。
- 剩下的就是具体的逻辑问题
# html 源代码：
<!DOCTYPE html>
<!--
* @Author: OBKoro1
* @Date: 2019-09-09 10:52:13
* @LastEditors: OBKoro1
* @LastEditTime: 2019-10-22 20:48:50
* @FilePath: /my_test/tets.html
* @Description: 手写移动端下拉刷新 PS：PC端也是一个原理 只是改为鼠标按下和抬起事件
* @Github: https://github.com/OBKoro1
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.content_father div {
height: 200px;
background: gray;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>F12开启浏览器手机模拟器，在顶部鼠标按住移动</div>
<div class="content_father">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
let content = document.querySelector('.content_father')
let startSite = 0 // 触摸的起始位置
let sendAjax = false // 发送请求
content.ontouchstart = e => {
let contentSite = content.getBoundingClientRect()
if (contentSite.y >= 0) {
console.log('在顶部')
startSite = e.touches[0].pageY
// 在顶部才绑定事件
content.ontouchmove = touchmoveFn
content.ontouchend = touchendFn
}
}
// 开始移动
function touchmoveFn(e) {
// 在浏览器顶部
let moveDistance = e.touches[0].pageY - startSite // 相差高度
const DISTANCE = 100 // 下滑距离超过100就刷新
const DISTANCE_FONT = 50 // 下滑距离超过50 就显示文案
if (moveDistance > DISTANCE) {
// 下滑足够距离
sendAjax = true
console.log('展示 刷新页面文案')
} else if (0 < moveDistance < DISTANCE_FONT) {
// 下滑距离不足
sendAjax = false // 实时更改是否发送请求
console.log('展示：继续下滑刷新页面文案')
} else {
// 上拉 取消请求
sendAjax = false // 实时更改是否发送请求
}
console.log('滑动距离', moveDistance)
}
// 触摸结束
function touchendFn(e) {
let contentSite = content.getBoundingClientRect()
// 判断在顶部
if (contentSite.y >= 0) {
// 并且上次上滑超过100
if (sendAjax) {
console.log('发送 请求')
}
}
// 清除事件
content.ontouchmove = null
content.ontouchend = null
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89