这个网页可以做成抖音那样,只要往上翻就可以进入下个文章,这是什么技术

Question

就是这个网页,可以无缝切换URL,文章也会变成对应的链接的文章
https://www.pingwest.com/a/21...
有没有大神可以分析一下这个技术

Answer 1

滚动底部加载下一篇——分页

Answer 2

这个实现差抖音的差远了，它是监听滚动，快接近底部的时候往页面里追加下一篇文章的内容，抖音要是这么干，不一会页面就得卡死。
除了触底时追加内容，它还使用 history 操作 URL 达到无缝切换的效果，应该是用了 vue-router 或者 react-route，通过下列代码就可以拦截到下拉时更新 URL 的操作了：

 const {pushState: fakePushState} = history;
 history.pushState = function pushState(...args){
    console.log('正在添加 URL，参数列表：', ...args);
    return pushState.bind(this)(...args);
}
// 类似操作仅供学习参考，请遵守相关法律及道德准则

Answer 3

简单地整理了一下用到的技术：
1.首先滚动加载 = 无限滚动，瀑布流的布局基本都有，组件也不少
2.无缝切换 URL，由于没有刷新，可以确定是 history.replaceState 或者 history.pushState