302 lines
8.5 KiB
HTML
302 lines
8.5 KiB
HTML
<!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>
|
||
<style>
|
||
body,
|
||
ul,
|
||
li {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
height: 45px;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
background: #fff;
|
||
z-index: 999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #dadada;
|
||
}
|
||
|
||
.header img {
|
||
width: 15px;
|
||
height: 20px;
|
||
transform: scale(0.6);
|
||
}
|
||
|
||
|
||
.content {
|
||
margin-top: 45px;
|
||
/* touch-action: none; */
|
||
}
|
||
|
||
.content li {
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #dadada;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.refresh {
|
||
width: 30px;
|
||
height: 30px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
position: fixed;
|
||
left: 50%;
|
||
z-index: 998;
|
||
background: #fff;
|
||
border-radius: 100%;
|
||
box-shadow: 0px 0px 9px #858585;
|
||
margin-left: -15px;
|
||
transition: all 0.1s;
|
||
}
|
||
|
||
.refresh img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.rotate {
|
||
animation: rotateAction 1s linear infinite;
|
||
}
|
||
|
||
@keyframes rotateAction {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="header">
|
||
<img src="../../../作业/img/64/左.png" alt="">
|
||
<span>热门视频</span>
|
||
<span></span>
|
||
</div>
|
||
|
||
<ul class="content">
|
||
<li>列表1</li>
|
||
<li>列表2</li>
|
||
<li>列表3</li>
|
||
<li>列表4</li>
|
||
<li>列表5</li>
|
||
<li>列表6</li>
|
||
<li>列表7</li>
|
||
<li>列表8</li>
|
||
<li>列表9</li>
|
||
<li>列表10</li>
|
||
<li>列表11</li>
|
||
<li>列表12</li>
|
||
<li>列表13</li>
|
||
<li>列表14</li>
|
||
<li>列表15</li>
|
||
<li>列表16</li>
|
||
<li>列表17</li>
|
||
<li>列表18</li>
|
||
<li>列表19</li>
|
||
<li>列表20</li>
|
||
<li>列表21</li>
|
||
<li>列表22</li>
|
||
<li>列表23</li>
|
||
<li>列表24</li>
|
||
<li>列表25</li>
|
||
<li>列表26</li>
|
||
<li>列表27</li>
|
||
<li>列表28</li>
|
||
<li>列表29</li>
|
||
<li>列表30</li>
|
||
<li>列表31</li>
|
||
<li>列表32</li>
|
||
<li>列表33</li>
|
||
<li>列表34</li>
|
||
<li>列表35</li>
|
||
<li>列表36</li>
|
||
<li>列表37</li>
|
||
<li>列表38</li>
|
||
<li>列表39</li>
|
||
<li>列表40</li>
|
||
</ul>
|
||
|
||
<div class="refresh" style="top: 10px;">
|
||
<img src="../../../作业/img/64/朋友圈.png" alt="">
|
||
</div>
|
||
</body>
|
||
<!-- 1 获取事件； 2 绑定事件； 3 事件处理函数。 -->
|
||
|
||
<!-- 思路：首先刷新这个方法是在滚动条到顶部的时候才会触发，因此要先判断滚动条是否在顶部，
|
||
然后再去调用该方法。然后去生成下拉刷新这一项功能：首先监听它的y值，开始/移动/结束
|
||
三过程，在移动的时候，为避免滚动条和下拉刷新事件冲突，因此要设置
|
||
避免默认事件e.preventDefault();
|
||
|
||
甲方需求：当滚动条到达顶部时，达到阈值，下拉刷新，否则无法触发该事件。 -->
|
||
<script>
|
||
// 知识拓展：pageX/pageY:
|
||
// 鼠标相对于整个页面的X/Y坐标。
|
||
// 注意，整个页面的意思就是你整个网页的全部。
|
||
// 比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。
|
||
|
||
// screenX/screenY：
|
||
// 鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率。
|
||
|
||
|
||
|
||
// function isTop() {
|
||
// if(document.documentElement.scrollTop === 0){
|
||
// return true
|
||
// }else{
|
||
// return false
|
||
// }
|
||
// // return document.documentElement.scrollTop === 0 ? true : false
|
||
// }
|
||
|
||
|
||
|
||
// if (isTop()) {
|
||
// addMove();
|
||
// } else {
|
||
// window.addEventListener('scroll', ()=>{
|
||
// // () => isTop() ? addMove() : ''
|
||
// if( isTop() ){
|
||
// addMove()
|
||
// }
|
||
// })
|
||
// }
|
||
|
||
|
||
function $(className) {
|
||
if (document.querySelectorAll(className).length > 1) {
|
||
return document.querySelectorAll(className)
|
||
} else {
|
||
return document.querySelector(className)
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// 首先判断是否到达顶部，到达顶部返回true，否则false，定义一个方法判断顶部。
|
||
// 当在顶部的时候，调用刷新方法，不是顶部的时候，再为空。
|
||
function ifTop() {
|
||
if (document.documentElement.scrollTop == 0) {
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
}
|
||
|
||
|
||
// 判断是否为true，是就调用方法，不是则监听判断是否为0，是的时候调用
|
||
if (ifTop()) {
|
||
Refresh();
|
||
console.log('Refresh');
|
||
} else {
|
||
window.addEventListener('scroll', function () {
|
||
if (ifTop()) {
|
||
console.log('scroll',ifTop());
|
||
Refresh()
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
var startY = 0, moveY = 0, endY = 0;
|
||
|
||
function Refresh() {
|
||
|
||
// 获取开始的Y值
|
||
$('.content').addEventListener('touchstart', (e) => {
|
||
startY = e.targetTouches[0].pageY
|
||
console.log('touchstart');
|
||
});
|
||
|
||
// 获取移动的y值，首先判断页面状态，是true才继续下一步
|
||
$('.content').addEventListener('touchmove', (e) => {
|
||
console.log('touchmove',ifTop());
|
||
// 页面状态true
|
||
if (ifTop()) {
|
||
|
||
// 获取移动的y值
|
||
moveY = e.targetTouches[0].pageY
|
||
// 判断是否为下拉
|
||
if (moveY > startY) {
|
||
console.log('preventDefault');
|
||
// 防止向下浏览和向下刷新冲突，故阻止默认事件
|
||
e.preventDefault();
|
||
// 获取移动距离
|
||
var distanceY = moveY - startY;
|
||
// 当移动距离在100以内时，改变图标距离
|
||
if (distanceY <= 120) {
|
||
// 120*3=360跟手刚好一圈
|
||
$('.refresh').style = `
|
||
top:${distanceY}px;
|
||
transform:rotate(${distanceY * 3}deg);`;
|
||
console.log(distanceY);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
// 获取结束y值
|
||
$('.content').addEventListener('touchend', (e) => {
|
||
// if(!ifTop()) return;
|
||
|
||
// 特别注意这里是changedTouches！！！！
|
||
var endY = event.changedTouches[0].pageY;
|
||
|
||
var distanceY = endY - startY;
|
||
|
||
|
||
if (distanceY <= 50) {
|
||
$('.refresh').style = `
|
||
top:10px;
|
||
transform:rotate(0deg);`;
|
||
}else {
|
||
|
||
// 添加了一个rotate包含了 animation: rotateAction 1s linear infinite;
|
||
// 以及@keyframes rotateAction，从0到360
|
||
|
||
$(".refresh").className = "refresh rotate"
|
||
// top: 80px;是为了固定图标悬浮转动的位置，无论大与小都固定在80px开始旋转
|
||
$('.refresh').style = `
|
||
top: 80px;
|
||
transform: rotate(0deg);`;//手动将旋转角度清为0，因为@keyframes rotateAction是从0开始
|
||
//如果不清0，旋转会从上次的值跳到0在开始
|
||
|
||
|
||
// 定时器，2秒以后再消失恢复默认
|
||
setTimeout(() =>{
|
||
$('.refresh').style = `
|
||
top: 10px;
|
||
transform: rotate(0}deg);`;
|
||
$(".refresh").className = "refresh"
|
||
},2000)
|
||
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
</html> |