首页 > react-router 处理下拉加载更多 list 数据时,如果实现浏览器位置保持?

react-router 处理下拉加载更多 list 数据时,如果实现浏览器位置保持?

比如说我有一商品的 list组件,当下拉加载更多数据到第1000多条时, 点击item列表项跳转到detail组件,这时点击浏览器的返回按钮,如何保持list 组件 1000条item数据项时的位置状态?!因为浏览器回退后当前页面的js会重新执行,又会把数据恢复成前几条。

如果能知道当前页面是通过回退得到也蛮好处理,但是如何通过js去判断浏览器当前地址是通过后退按钮得到,还是通过点击了页面上的链接得到呢?!或者还有没有更好的方法解决这样的场景?


今天看React Router官方Demo
https://github.com/rackt/react-router/tree/master/examples/pinterest

里面使用了modal模式,应该能够解决这个问题


官方承诺后面会加这个功能。

如果现在必须要实现,可以通过 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];
        }
    }
}
【热门文章】
【热门文章】