标签：flex ball H5 item switch IntersectionObserver tb ID 加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/5.css" />
</head>
<body>
<div class="warp">
<div class="table" id="table">
<div class="th">
<div class="th-item">ID</div>
<div class="th-item">ID</div>
<div class="th-item">ID</div>
<div class="th-item">ID</div>
<div class="th-item">ID</div>
<div class="th-item">ID</div>
<div class="th-item">ID</div>
<div class="th-item">ID</div>
<div class="th-item">ID</div>
<div class="th-item">ID</div>
<div class="th-item">ID</div>
<div class="th-item">ID</div>
</div>
<div class="tb" id="tb">
<div class="tb-item">
</div>
</div>
</div>
<div class="loader-box">
<div id="loader"></div>
<div id="nothing" class="hidden">没有更多了~</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
const switchBtn = document.querySelector(".switch")
const ball = document.querySelector(".ball")
// 点击开关事件
switchBtn.addEventListener("click", function () {
if (this.className == "switch switch-active") {
this.classList.remove("switch-active")
ball.classList.remove("ball-active")
ball.classList.add("ball")
} else {
this.classList.add("switch-active") // 添加动画效果
ball.classList.remove("ball")
ball.classList.add("ball-active")
}
})
const tb = document.getElementById("tb"),
loader = document.getElementById("loader"),
nothing = document.getElementById("nothing"),
LIST_LIMIT_CNT = 200,
LOADING_TIME = 500
let hasMore = true,
loadLock = false
window.onload = function () {
// IntersectionObserver 监听加载动画有没有进入视口内部
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
pullUp()
}
},
{
root: null,
rootMargin: "0px",
threshold: 0
}
)
observer.observe(loader)
}
function pullUp() {
if (!hasMore) {
return
}
if (loadLock) {
return
}
loadData()
}
// 获取数据
function loadData() {
const len = tb.children.length
loadLock = true
setTimeout(() => {
if (len >= LIST_LIMIT_CNT) {
loader.className = "hidden"
nothing.className = ""
hasMore = false
return
}
for (let i = len; i < len + 19; i++) {
let item = document.createElement("div")
item.className = "tb-item"
item.id = "tb-item"
item.innerHTML = `
<div>a${i}</div>
<div>b${i}</div>
<div>c${i}</div>
<div>d${i}</div>
<div>a${i}</div>
<div>b${i}</div>
<div>c${i}</div>
<div>d${i}</div>
<div>a${i}</div>
<div>b${i}</div>
<div>c${i}</div>
<div>
<div class="switch">
<div class="ball"></div>
</div>
</div>`
tb.append(item)
}
loadLock = false
}, LOADING_TIME)
}
</script>
</html>
html {
overflow-x: hidden;
overflow-y: auto;
}
body {
width: 100vw;
overflow: hidden;
padding-right: calc(100vw - 100%);
}
.warp {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.table {
/* margin: 100px auto; */
width: 1200px;
border: 0.5px solid #b6b5b5;
}
.th {
display: flex;
}
.tb {
display: flex;
flex-direction: column;
}
.tb-item {
display: flex;
}
.tb-item > div,
.th-item {
flex: 1;
padding: 10px 0;
border: 0.5px solid #b6b5b5;
display: flex;
justify-content: center;
align-items: center;
}
.switch,
.switch-active {
width: 50px;
height: 24px;
border-radius: 30px;
background-color: #ccc;
position: relative;
cursor: pointer;
}
.switch-active {
background-color: aquamarine;
}
.switch > div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
}
.ball {
position: absolute;
top: 2px;
left: 2px;
}
.ball-active {
position: absolute;
top: 2px;
right: 2px;
}
.loader-box {
display: flex;
align-items: center;
justify-content: center;
}
#loader {
width: 25px;
height: 25px;
border: 3px solid #ddd;
border-radius: 50%;
border-bottom: 3px solid #717171;
transform: rotate(0deg);
animation: loading 1s linear infinite;
}
@keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#nothing {
margin-bottom: 100px;
}
.hidden {
display: none;
}
标签：flex,
ball,
H5,
item,
switch,
IntersectionObserver,
tb,
ID,
加载
From： https://blog.csdn.net/poguanba/article/details/143592413