react-router 处理下拉加载更多 list 数据时，如果实现浏览器位置保持？
比如说我有一商品的 list组件，当下拉加载更多数据到第1000多条时， 点击item列表项跳转到detail组件，这时点击浏览器的返回按钮，如何保持list 组件 1000条item数据项时的位置状态？！因为浏览器回退后当前页面的js会重新执行，又会把数据恢复成前几条。
如果能知道当前页面是通过回退得到也蛮好处理，但是如何通过js去判断浏览器当前地址是通过后退按钮得到，还是通过点击了页面上的链接得到呢？！或者还有没有更好的方法解决这样的场景？
什么的什么大爷
9 years, 2 months ago
Answers
官方承诺后面会加这个功能。
如果现在必须要实现，可以通过 onEnter和onLeave事件实现（不知道最新版还叫这个名字吗，你试试）
React.render(
(
<Router>
<Route path="/" component={App}>
<IndexRoute component={PostListElement}
onEnter={()=>{ utils.Scroll.restoreScroll('PostList') }}
onLeave={()=>{ utils.Scroll.setScroll('PostList') }} />
<Route path="posts/:postId" component={PostDetailElement} />
</Route>
</Router>
),
document.getElementById('mount-dom')
)
//写个Utils，通过key，记录scroll的位置
//注意restoreScroll时，需要一个setTimeout 0,不然无效
Utils.Scroll= createScrollMgr()
function createScrollMgr(){
var scrollMap={}
return {
restoreScroll(key){
if(!(key in scrollMap)){
scrollMap[key] = {
x:0,
y:0
}
}
var _s = scrollMap[key]
const x = _s.x,
y = _s.y;
setTimeout(function(){
window.scrollTo(x,y);
},0)
},
setScroll(key){
scrollMap[key] = {
x:window.pageXOffset || document.documentElement.scrollLeft,
y:window.pageYOffset || document.documentElement.scrollTop
}
},
deleteScroll(key){
delete scrollMap[key];
}
}
}
可乐喵吃鱼
answered 9 years, 2 months ago