uni-app scroll-view 里的数据是v-for循环的，触底就会加载更多数据，但是，如果划得太快的话，就会偶尔触发不了触底事件@scrolltolower，必须向上划一点，再向下划，才触发
浪子三唱
- 发布：2020-07-13 23:58
- 更新：2023-12-13 11:52
- 阅读：4157
这个可以不用官方的@scrolltolower, 换一种思路，遍历循环的列表不是有一个“下拉加载更多”的文本嘛，通过h5新特性new IntersectionObserver, 可以监听到它的显示隐藏，他显示了就触发下拉加载更多
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="box" style="width: 100px;height: 100px;border: 2px solid #f00;"></div>
</body>
<script>
window.addEventListener("load", function () {
var io = new IntersectionObserver(
entries => {
console.log(entries);
},
{
/* 使用默认参数。下面详细说明 */
}
);
// 开始观测某个元素
io.observe(document.getElementById("box"));
// 停止关注某个元素
// io.unobserve(element);
// 禁用整个 IntersectionObserver
// io.disconnect();
})
</script>
</html> 
jones1231
你好问题解决了吗 现在都是2022了 我也遇到这个问题
2022-06-21 17:29