翻页列表(记住当前位置)

为了更好的用户体验，列表页大都选择分页加载的方式，现在的问题是什么呢，就是从分页列表第三页点击进图列表详情页，按浏览器返回键后回到列表页，如果停留在之前的位置😆，说到底就是能监听路由变化，不改变原页面。

实现思路一

1.项目使用browserHistory路由默认

如果项目是合并到后端部署需要后端同步配置，在后端项目路由最后一行，match *path 直接渲染前端html文件，
比如 ruby项目->config/routes.rb文件最后一行需添加
     match "*path", to: "pc#index", via: :all

2.列表点击路由不做跳转，push哈希值

onClick=function(){
    browserHistory.push('/#123')
    fetch({xxx:123})...
}
此刻详情页以模态框的形式显示

3.监听浏览器 哈希值 的改变

如果存在hash则请求详情数据，同时显示模态框，否则影藏模态框

window.onhashchange = function(location) {
    console.log(location,'------')
    if(location.xxx){
        fetch(...)
    }
}

实现思路二(参考上儿科普教育)

路由页面：

<Route path='/KePuJY' getComponent={KePuJY} onEnter={()=>this.setTitleAndShare('科普教育')}>
    <Route path=':id' getComponent={ArticleDetail} onEnter={()=>this.setTitleAndShare('文章详情')}></Route>
</Route>

文章列表页：

import { browserHistory} from 'react-router'
componentDidMount(){
    browserHistory.listen((location)=>{
        if(location.action == 'POP'){
            this.setState({display:'none'})
        }else{
            this.setState({display:'block'})
        }
    })
}
render(){
    return (
        <div className="xx">
            ul>li*10
            <div style={{display:this.state.display,width:'100%',height:'100%'}}>
                {this.props.children}
            </div>
        </div>
    );
}

详情页：

.ArticleDetail{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

就先酱紫吧😯

温馨提示：

1. iscroll内部盒子元素padding会导致高度计算不准确

2. getBoundingClientRect在苹果手机首次加载的时候不正确，滚动后才正确