移动端分页策略
问题：
加载0到9个数据后，此时数据库新增了一个最新数据。下次请求10到19个数据时，会有一个数据和之前的0到9数据重复。
修复方式：
1、后台更改接口，需要传入第10个数据的id传入，基于此进行范围数据查询返回。
2、前端使用0-10，0-20，0-30分页方式
页面hash路由和history路由区别
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。
所以你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
浏览器原生支持的判断元素进入"视口"（viewport）的api
Intersection Observer API
https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API
http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html
试用场景：移动端分页
var intersectionObserver = new IntersectionObserver(
function (entries) {
// 如果不可见，就返回
if (entries[0].intersectionRatio <= 0) return;
loadItems(10);
console.log('Loaded new items');
});
// 开始观察
intersectionObserver.observe(
document.querySelector('.scrollerFooter')
);
一个完整的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>intersection observer api的异步记载无限滚动用例</title>
<style>
body{
margin: 0;
}
#root div{
border-bottom: 1px solid #ccc;
height: 100px;
}
.scrollerFooter{
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<div id="root"></div>
<div class="scrollerFooter">加载更多</div>
</body>
<script>
let loading = false;
const addItem = ()=>{
loading = true;
const root = document.getElementById('root');
const fragment = document.createDocumentFragment();
for (let i=0;i<10;i++) {
let li = document.createElement('div');
li.innerHTML = `div ${i}`;
fragment.appendChild(li);
}
setTimeout(()=>{
loading = false;
root.appendChild(fragment);
},2000);
};
const intersectionObserver = new IntersectionObserver(
(entries) => {
// 如果不可见，就返回
if(loading){
return
}
// 也可用IntersectionObserverEntry.isIntersecting，兼容性参考：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserverEntry/isIntersecting
if (entries[0].intersectionRatio <= 0) {
return
};
addItem();
console.log('加载更多');
},
{
threshold: [1]
}
);
// 开始观察
intersectionObserver.observe(
document.querySelector('.scrollerFooter')
);
addItem();
</script>
</html>
网友评论